diff --git a/mobile-header-share.css b/mobile-header-share.css
new file mode 100644
index 00000000..b17b809f
--- /dev/null
+++ b/mobile-header-share.css
@@ -0,0 +1,96 @@
+/*
+  Matchplay mobile header styles (shareable)
+  Extracted from src/App.css
+*/
+
+.main-nav,
+.mobile-header {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  justify-content: space-between;
+  align-items: center;
+  padding: 12px 16px;
+  background: #fff;
+  border-bottom: 1px solid #e2e8f0;
+  gap: 12px;
+}
+
+.main-nav {
+  border-radius: 20px;
+  padding: 16px 24px;
+  box-shadow: 0 12px 32px rgba(15, 23, 42, 0.08);
+  border-bottom: none;
+  position: relative;
+  z-index: 100;
+  gap: 32px;
+}
+
+.header-left,
+.mobile-header-left {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  flex-shrink: 0;
+}
+
+.header-right,
+.mobile-header-right {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  flex-shrink: 0;
+}
+
+@media (max-width: 600px) {
+  .main-nav:not(.mobile-header) {
+    flex-direction: column;
+    align-items: flex-start;
+  }
+}
+
+@media (max-width: 768px) {
+  .desktop-nav-links {
+    display: none;
+  }
+
+  .mobile-header {
+    display: flex !important;
+    flex-direction: row !important;
+    justify-content: space-between !important;
+    align-items: center !important;
+  }
+
+  .main-nav,
+  .mobile-header {
+    flex-direction: row !important;
+    flex-wrap: nowrap !important;
+  }
+
+  .main-nav.mobile-header {
+    flex-wrap: nowrap !important;
+  }
+
+  .main-nav.mobile-header .desktop-nav-links {
+    display: none !important;
+  }
+
+  .main-nav.mobile-header .header-left {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    min-width: 0;
+    flex: 1;
+  }
+
+  .main-nav.mobile-header .header-right {
+    display: flex !important;
+    align-items: center;
+    gap: 8px;
+    flex-shrink: 0;
+  }
+
+  .main-nav.mobile-header .user-menu {
+    flex-shrink: 0;
+  }
+}
diff --git a/src/App.css b/src/App.css
index f87fe884..ee241036 100644
--- a/src/App.css
+++ b/src/App.css
@@ -6,24 +6,36 @@
 
 .dashboard-page {
   max-width: 1240px;
+  width: 100%;
   margin: 0 auto;
   display: flex;
   flex-direction: column;
   gap: 32px;
+  overflow-x: clip;
+}
+
+.main-nav,
+.mobile-header {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  justify-content: space-between;
+  align-items: center;
+  padding: 12px 16px;
+  background: #fff;
+  border-bottom: 1px solid #e2e8f0;
+  gap: 12px;
 }
 
 .main-nav {
-  background: #ffffff;
   border-radius: 20px;
   padding: 16px 24px;
   box-shadow: 0 12px 32px rgba(15, 23, 42, 0.08);
-  display: flex;
-  align-items: center;
-  gap: 32px;
-  justify-content: space-between;
+  border-bottom: none;
   position: relative;
   /* Ensure navigation menus always appear above page content like the Find Coaches filters */
   z-index: 100;
+  gap: 32px;
 }
 
 .brand {
@@ -34,6 +46,7 @@
   font-size: 20px;
   color: #0f172a;
   flex-shrink: 0;
+  text-decoration: none;
 }
 
 .brand-badge {
@@ -67,8 +80,8 @@
 
 .nav-link:hover,
 .nav-link.active {
-  background: rgba(22, 163, 74, 0.1);
-  color: #15803d;
+  background: #ede9fe;
+  color: #7c3aed;
 }
 
 .header-actions {
@@ -78,6 +91,23 @@
   flex-shrink: 0;
 }
 
+
+.header-left,
+.mobile-header-left {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  flex-shrink: 0;
+}
+
+.header-right,
+.mobile-header-right {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  flex-shrink: 0;
+}
+
 .user-avatar {
   width: 40px;
   height: 40px;
@@ -129,6 +159,10 @@
   box-shadow: 0 0 0 4px rgba(239, 68, 68, 0.15);
 }
 
+.mobile-badge {
+  display: none;
+}
+
 .user-menu {
   position: relative;
 }
@@ -218,6 +252,7 @@
   gap: 32px;
   flex: 1;
   width: 100%;
+  overflow-x: clip;
 }
 
 .play-hero {
@@ -1958,7 +1993,7 @@
 }
 
 @media (max-width: 600px) {
-  .main-nav {
+  .main-nav:not(.mobile-header) {
     flex-direction: column;
     align-items: flex-start;
   }
@@ -2328,3 +2363,847 @@
     align-items: flex-start;
   }
 }
+
+/* Matchplay home redesign */
+
+.home-redesign,
+.home-redesign * {
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+}
+.home-redesign {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) 340px;
+  gap: 24px;
+}
+
+.home-redesign__main,
+.home-redesign__sidebar {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+
+.schedule-section-mobile,
+.bottom-nav-mobile {
+  display: none;
+}
+
+.hero-cards {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 16px;
+}
+
+.hero-card {
+  border: 0;
+  border-radius: 16px;
+  padding: 20px;
+  color: #fff;
+  display: flex;
+  align-items: center;
+  gap: 14px;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
+  cursor: pointer;
+}
+
+.hero-icon {
+  width: 48px;
+  height: 48px;
+  border-radius: 12px;
+  background: rgba(255, 255, 255, 0.2);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 22px;
+}
+
+.hero-content {
+  flex: 1;
+}
+
+.hero-title {
+  font-size: 16px;
+  font-weight: 700;
+  color: #fff;
+}
+
+.hero-subtitle {
+  font-size: 12px;
+  color: rgba(255, 255, 255, 0.85);
+}
+
+.hero-arrow {
+  width: 32px;
+  height: 32px;
+  border-radius: 8px;
+  background: rgba(255, 255, 255, 0.2);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: #fff;
+  flex-shrink: 0;
+}
+
+.hero-card--match { background: linear-gradient(135deg, #10b981, #059669); }
+.hero-card--lesson { background: linear-gradient(135deg, #8b5cf6, #7c3aed); }
+
+.date-selector-v2,
+.filter-bar-v2,
+.available-section,
+.sidebar-card-v2 {
+  background: #fff;
+  border: 1px solid #e2e8f0;
+  border-radius: 14px;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
+}
+
+.date-selector-v2 {
+  display: flex;
+  align-items: stretch;
+  gap: 8px;
+  padding: 16px;
+  overflow-x: auto;
+}
+
+.date-nav-btn {
+  width: 36px;
+  border: 1px solid #e2e8f0;
+  background: #f8fafc;
+  border-radius: 8px;
+}
+
+.date-option {
+  min-width: 92px;
+  padding: 10px 12px;
+  border: 1px solid #eef2f7;
+  background: #f8fafc;
+  border-radius: 10px;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  color: #334155;
+}
+
+.date-option .date-day {
+  font-size: 10px;
+  font-weight: 600;
+  color: #94a3b8;
+  text-transform: uppercase;
+}
+
+.date-option .date-num {
+  font-size: 18px;
+  font-weight: 700;
+  color: #1e293b;
+  line-height: 1;
+}
+
+.date-option .date-count {
+  font-size: 10px;
+  font-weight: 500;
+  color: #64748b;
+}
+
+.date-option.selected .date-day,
+.date-option.selected .date-count {
+  color: #8b5cf6;
+}
+
+.date-option.selected .date-num {
+  color: #7c3aed;
+}
+
+.date-option.selected {
+  border: 2px solid #8b5cf6;
+  background: #ede9fe;
+}
+
+.date-calendar-btn {
+  margin-left: auto;
+  border: 2px dashed #e2e8f0;
+  border-radius: 10px;
+  background: #fff;
+  padding: 0 14px;
+  color: #475569;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.date-picker-input {
+  position: absolute;
+  opacity: 0;
+  width: 0;
+  pointer-events: none;
+}
+
+.filter-bar-v2 {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 14px 20px;
+}
+
+.filter-row-v2,
+.filter-tabs-v2 {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.filter-tabs-v2 {
+  flex: 1;
+}
+
+.filter-item {
+  border: 1px solid #e2e8f0;
+  background: #f8fafc;
+  border-radius: 10px;
+  padding: 10px 14px;
+  color: #475569;
+}
+
+.filter-divider {
+  width: 1px;
+  align-self: stretch;
+  background: #e2e8f0;
+  margin: 0 6px;
+}
+
+.filter-tab {
+  border: 0;
+  border-radius: 8px;
+  background: transparent;
+  padding: 8px 12px;
+  font-weight: 600;
+  color: #64748b;
+}
+
+.filter-tab span {
+  background: #e2e8f0;
+  border-radius: 999px;
+  padding: 1px 6px;
+  margin-left: 6px;
+  font-size: 12px;
+}
+
+.filter-tab.active {
+  background: #ede9fe;
+  color: #7c3aed;
+}
+
+.available-section { padding: 18px; }
+
+.available-section__header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 12px;
+}
+
+.available-section__header h2 {
+  margin: 0;
+  font-size: 18px;
+  font-weight: 700;
+  color: #1e293b;
+}
+
+.available-section__header button {
+  border: 0;
+  background: transparent;
+  color: #8b5cf6;
+  font-weight: 600;
+}
+
+.activity-list-v2 {
+  display: flex;
+  flex-direction: column;
+  gap: 14px;
+}
+
+.activity-card-v2 {
+  border: 1px solid #e2e8f0;
+  border-radius: 14px;
+  padding: 16px;
+  display: flex;
+  gap: 16px;
+  align-items: flex-start;
+}
+
+.activity-type-icon {
+  width: 48px;
+  height: 48px;
+  border-radius: 12px;
+  display: grid;
+  place-items: center;
+  font-size: 24px;
+}
+
+.activity-type-icon.match { background: #d1fae5; }
+.activity-type-icon.lesson { background: #ede9fe; }
+.activity-type-icon.group { background: #fef3c7; }
+
+.activity-content { flex: 1; }
+.activity-top-row { display: flex; gap: 8px; align-items: center; }
+.activity-top-row h3 { margin: 0; }
+
+.activity-type-label {
+  font-size: 11px;
+  font-weight: 700;
+  text-transform: uppercase;
+}
+
+.activity-type-label.match { color: #059669; }
+.activity-type-label.lesson { color: #7c3aed; }
+.activity-type-label.group { color: #d97706; }
+
+.activity-badge {
+  font-size: 10px;
+  font-weight: 700;
+  color: #ef4444;
+  background: #fee2e2;
+  border-radius: 6px;
+  padding: 2px 6px;
+}
+
+.activity-content h3 {
+  margin: 6px 0;
+  font-size: 16px;
+  font-weight: 600;
+  color: #1e293b;
+}
+
+.activity-meta-row {
+  display: flex;
+  gap: 12px;
+  flex-wrap: wrap;
+  color: #64748b;
+  font-size: 13px;
+}
+
+.activity-meta-row span { display: inline-flex; align-items: center; gap: 4px; }
+
+.activity-right {
+  border-left: 1px solid #f1f5f9;
+  padding-left: 16px;
+  min-width: 120px;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  align-items: flex-end;
+}
+
+.activity-price {
+  font-size: 22px;
+  font-weight: 700;
+  color: #0f172a;
+}
+
+.activity-spots { font-size: 12px; color: #64748b; }
+.activity-spots.urgent { color: #dc2626; font-weight: 600; }
+
+.activity-btn {
+  border: 0;
+  border-radius: 10px;
+  color: #fff;
+  padding: 8px 22px;
+  font-weight: 600;
+}
+
+.activity-btn.match { background: #10b981; }
+.activity-btn.lesson,
+.activity-btn.group { background: #8b5cf6; }
+
+.sidebar-card-v2 {
+  padding: 16px;
+}
+
+.sidebar-card-v2__header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 10px;
+}
+
+.sidebar-card-v2__header h3,
+.sidebar-card-v2 > h3 {
+  margin: 0;
+  color: #1e293b;
+}
+
+.sidebar-card-v2__header button {
+  border: 0;
+  background: transparent;
+  color: #8b5cf6;
+  font-weight: 600;
+}
+
+.schedule-item-v2 {
+  display: flex;
+  gap: 10px;
+  background: #f8fafc;
+  border-radius: 10px;
+  padding: 10px;
+  margin-bottom: 10px;
+}
+
+.schedule-type {
+  width: 4px;
+  border-radius: 3px;
+  background: #8b5cf6;
+}
+
+.schedule-type.group { background: #f59e0b; }
+
+.schedule-item-v2 p,
+.schedule-item-v2 h4,
+.schedule-item-v2 span {
+  margin: 0;
+}
+
+.schedule-item-v2 h4 {
+  font-size: 15px;
+  color: #0f172a;
+}
+
+.schedule-item-v2 span,
+.sidebar-empty { color: #64748b; font-size: 13px; }
+
+.stats-grid {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: 10px;
+  margin-top: 12px;
+}
+
+.stats-grid div {
+  background: #f8fafc;
+  border-radius: 10px;
+  padding: 16px 10px;
+  text-align: center;
+}
+
+.stats-grid strong {
+  display: block;
+  font-size: 32px;
+  color: #0f172a;
+}
+
+.stats-grid span {
+  color: #64748b;
+  font-size: 12px;
+}
+
+.find-players-card {
+  text-align: center;
+}
+
+.find-emoji {
+  font-size: 52px;
+  margin: 8px 0;
+}
+
+.find-players-card h4 {
+  margin: 0;
+  color: #0f172a;
+}
+
+.find-players-card p {
+  color: #64748b;
+}
+
+.find-players-btn {
+  border: 0;
+  background: #8b5cf6;
+  color: #fff;
+  border-radius: 10px;
+  padding: 10px 16px;
+  font-weight: 600;
+}
+
+@media (max-width: 1100px) {
+  .home-redesign {
+    grid-template-columns: 1fr;
+  }
+
+  .hero-cards {
+    grid-template-columns: 1fr;
+  }
+}
+
+
+@media (max-width: 768px) {
+  .main-nav,
+  .mobile-header {
+    flex-direction: row;
+    flex-wrap: nowrap;
+  }
+
+  .main-nav.mobile-header {
+    position: sticky;
+    top: 0;
+    z-index: 120;
+    padding: 12px 16px;
+    border-radius: 0;
+    border-bottom: 1px solid #f1f5f9;
+    box-shadow: none;
+    margin: 0;
+    flex-wrap: nowrap;
+    gap: 12px;
+  }
+
+  .desktop-nav-links {
+    display: none;
+  }
+
+  .mobile-header-left {
+    gap: 10px;
+  }
+
+  .header-left {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    min-width: 0;
+  }
+
+  .mobile-logo {
+    width: 36px;
+    height: 36px;
+    border-radius: 10px;
+    background: linear-gradient(135deg, #a3e635, #84cc16);
+    font-size: 0;
+  }
+
+  .mobile-brand {
+    font-size: 20px;
+    font-weight: 700;
+    color: #1e293b;
+  }
+
+  .mobile-header-right {
+    gap: 8px;
+  }
+
+  .header-right {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    flex-shrink: 0;
+  }
+
+  .mobile-header-btn {
+    width: 40px;
+    height: 40px;
+    border-radius: 12px;
+    background: #f1f5f9;
+  }
+
+  .notification-indicator {
+    display: none;
+  }
+
+  .mobile-badge {
+    position: absolute;
+    top: -4px;
+    right: -4px;
+    width: 18px;
+    height: 18px;
+    border-radius: 9px;
+    border: 2px solid #fff;
+    background: #ef4444;
+    color: #fff;
+    font-size: 10px;
+    font-weight: 700;
+    display: grid;
+    place-items: center;
+  }
+
+  .mobile-avatar {
+    width: 40px;
+    height: 40px;
+    background: linear-gradient(135deg, #8b5cf6, #7c3aed);
+    font-size: 14px;
+    font-weight: 700;
+  }
+
+  .user-menu__trigger {
+    padding: 0;
+    background: transparent;
+    box-shadow: none;
+  }
+
+  .user-menu__trigger > svg {
+    display: none;
+  }
+
+  .icon-btn {
+    position: relative;
+  }
+
+  .home-redesign {
+    grid-template-columns: 1fr;
+    width: 100%;
+    max-width: 100%;
+    gap: 12px;
+    padding-bottom: 90px;
+    overflow-x: hidden;
+  }
+
+  .home-redesign__main {
+    width: 100%;
+    max-width: 100%;
+    overflow-x: hidden;
+  }
+
+  .home-redesign__sidebar {
+    display: none;
+  }
+
+  .hero-scroll {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 10px;
+    width: 100%;
+    max-width: 100%;
+    box-sizing: border-box;
+    padding: 16px;
+    overflow: visible;
+  }
+
+  .hero-card {
+    min-width: 0;
+    max-width: 100%;
+    padding: 12px;
+    border-radius: 14px;
+    gap: 10px;
+    align-items: center;
+    box-sizing: border-box;
+  }
+
+  .hero-icon {
+    width: 40px;
+    height: 40px;
+    border-radius: 10px;
+    font-size: 18px;
+    flex-shrink: 0;
+  }
+
+  .hero-title {
+    font-size: 14px;
+    line-height: 1.25;
+    font-weight: 700;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  .hero-subtitle {
+    display: none;
+  }
+
+  .hero-arrow {
+    display: none;
+  }
+
+  .schedule-section-mobile {
+    display: block;
+    background: #fff;
+    border-radius: 14px;
+    border: 1px solid #e2e8f0;
+    margin-top: 6px;
+  }
+
+  .schedule-header-mobile {
+    display: flex;
+    justify-content: space-between;
+    padding: 14px 16px;
+    border-bottom: 1px solid #f1f5f9;
+  }
+
+  .schedule-title-mobile { font-size: 15px; font-weight: 700; color: #1e293b; }
+  .schedule-link-mobile { border: 0; background: transparent; color: #8b5cf6; font-size: 13px; font-weight: 600; }
+
+  .schedule-items-mobile {
+    display: flex;
+    gap: 8px;
+    padding: 12px;
+    overflow-x: auto;
+    -webkit-overflow-scrolling: touch;
+  }
+
+  .schedule-items-mobile::-webkit-scrollbar { display: none; }
+
+  .schedule-item-mobile {
+    flex: 0 0 auto;
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    padding: 10px 14px;
+    background: #f8fafc;
+    border-radius: 10px;
+    min-width: 170px;
+  }
+
+  .schedule-time-mobile { display: flex; flex-direction: column; }
+  .schedule-time-value { font-size: 15px; font-weight: 700; color: #1e293b; line-height: 1; }
+  .schedule-time-period { font-size: 11px; font-weight: 700; color: #94a3b8; }
+  .schedule-item-title-mobile { font-size: 13px; font-weight: 600; color: #1e293b; }
+  .schedule-meta-mobile { font-size: 12px; color: #64748b; }
+
+  .date-selector-v2 {
+    gap: 6px;
+    width: 100%;
+    max-width: 100%;
+    box-sizing: border-box;
+    padding: 12px;
+    overflow-x: auto;
+    overflow-y: hidden;
+    box-shadow: none;
+    border-bottom: 0;
+    -ms-overflow-style: none;
+    scrollbar-width: none;
+  }
+
+  .date-nav-btn { width: 32px; height: 32px; flex-shrink: 0; }
+  .date-option { padding: 8px 10px; min-width: 52px; flex-shrink: 0; }
+  .date-option .date-day { font-size: 10px; }
+  .date-option .date-num { font-size: 18px; }
+  .date-option .date-count { font-size: 10px; }
+  .date-calendar-btn { padding: 8px 10px; min-width: 48px; flex-shrink: 0; }
+
+  .date-selector-v2::-webkit-scrollbar {
+    display: none;
+    width: 0;
+    height: 0;
+  }
+
+  .filter-bar-v2 {
+    flex-direction: column;
+    align-items: stretch;
+    gap: 8px;
+    padding: 0;
+    border: 0;
+    background: transparent;
+    box-shadow: none;
+  }
+
+  .filter-row-v2 {
+    display: flex;
+    gap: 8px;
+    padding: 0 16px;
+    margin-bottom: 12px;
+  }
+
+  .filter-item {
+    flex: 1;
+    padding: 10px 14px;
+    background: #fff;
+    border-radius: 10px;
+    font-size: 13px;
+    font-weight: 500;
+  }
+
+  .filter-tabs-v2 {
+    background: #fff;
+    border: 1px solid #e2e8f0;
+    border-radius: 10px;
+    padding: 4px;
+    gap: 4px;
+    margin: 0 16px 16px;
+  }
+
+  .filter-tab {
+    flex: 1;
+    padding: 10px 8px;
+    font-size: 13px;
+    border-radius: 8px;
+    text-align: center;
+  }
+
+  .filter-tab span {
+    font-size: 10px;
+    border-radius: 4px;
+    padding: 2px 6px;
+  }
+
+  .available-section {
+    padding: 0;
+    border: 0;
+    box-shadow: none;
+    background: transparent;
+  }
+
+  .activity-list-v2 { gap: 12px; }
+
+  .activity-card-v2 {
+    background: #fff;
+    border-radius: 14px;
+    border: 1px solid #e2e8f0;
+    padding: 16px;
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+  }
+
+  .activity-main-row {
+    display: flex;
+    align-items: flex-start;
+    gap: 12px;
+  }
+
+  .activity-content {
+    width: 100%;
+  }
+
+  .activity-meta-row {
+    gap: 10px;
+    margin-bottom: 10px;
+  }
+
+  .activity-right {
+    width: 100%;
+    border-left: 0;
+    border-top: 1px solid #f1f5f9;
+    padding: 14px 0 0;
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-between;
+  }
+
+  .activity-btn { padding: 12px 28px; font-size: 14px; }
+
+  .bottom-nav-mobile {
+    display: flex;
+    position: fixed;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    z-index: 120;
+    justify-content: space-around;
+    padding: 10px 8px 20px;
+    background: #fff;
+    border-top: 1px solid #e2e8f0;
+  }
+
+  .bottom-nav-mobile__item {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 4px;
+    font-size: 10px;
+    font-weight: 600;
+    color: #94a3b8;
+    text-decoration: none;
+  }
+
+  .bottom-nav-mobile__item.active {
+    color: #8b5cf6;
+  }
+
+  .bottom-nav-mobile__icon {
+    font-size: 22px;
+    line-height: 1;
+  }
+}
+
diff --git a/src/components/MainLayout.tsx b/src/components/MainLayout.tsx
index 29116ba3..218a1590 100644
--- a/src/components/MainLayout.tsx
+++ b/src/components/MainLayout.tsx
@@ -3,17 +3,13 @@ import { useEffect, useRef, useState } from "react";
 import { Link, NavLink } from "react-router-dom";
 import { useAuth } from "../context/AuthContext";
 import usePlayerIdentity from "../hooks/usePlayerIdentity";
-import { Bell, ChevronDown, CreditCard, LogOut, ShieldX, Target, UserRound } from "lucide-react";
+import { Bell, ChevronDown, CreditCard, LogOut, MessageCircle, ShieldX, Target, UserRound } from "lucide-react";
 
 const navLinks = [
-  { label: "Home", to: "/" },
   { label: "Browse Matches", to: "/matches" },
   { label: "Find Players", to: "/find-players" },
   { label: "Group Lessons", to: "/group-lessons" },
-  { label: "Find Coaches", to: "/find-coaches" },
-  { label: "My Coaches", to: "/my-coaches" },
-  { label: "Credits", to: "/credits" },
-  { label: "My Activity", href: "#activity" },
+  { label: "Coaches", to: "/find-coaches" },
 ];
 
 interface MainLayoutProps {
@@ -49,12 +45,12 @@ const MainLayout = ({ children }: MainLayoutProps) => {
 
   return (
     <div className="dashboard-page">
-      <header className="main-nav">
-        <div className="brand">
-          <div className="brand-badge">MP</div>
-          <span>Matchplay</span>
-        </div>
-        <nav className="nav-links">
+      <header className="main-nav mobile-header">
+        <Link className="brand mobile-header-left header-left" to="/" aria-label="Matchplay home">
+          <div className="brand-badge mobile-logo">🎾</div>
+          <span className="mobile-brand">Matchplay</span>
+        </Link>
+        <nav className="nav-links desktop-nav-links">
           {navLinks.map((link) =>
             link.to ? (
               <NavLink
@@ -71,10 +67,14 @@ const MainLayout = ({ children }: MainLayoutProps) => {
             ),
           )}
         </nav>
-        <div className="header-actions">
-          <button type="button" className="notification-button" aria-label="View notifications">
+        <div className="header-actions mobile-header-right header-right">
+          <button type="button" className="notification-button mobile-header-btn icon-btn" aria-label="Open messages">
+            <MessageCircle size={20} aria-hidden="true" />
+          </button>
+          <button type="button" className="notification-button mobile-header-btn icon-btn" aria-label="View notifications">
             <Bell size={20} aria-hidden="true" />
             <span className="notification-indicator" aria-hidden="true" />
+            <span className="mobile-badge" aria-hidden="true">3</span>
           </button>
           <div className="user-menu" ref={userMenuRef}>
             <button
@@ -85,7 +85,7 @@ const MainLayout = ({ children }: MainLayoutProps) => {
               aria-haspopup="menu"
               aria-label="Open profile menu"
             >
-              <div className={`user-avatar${avatarUrl ? " user-avatar--image" : ""}`}>
+              <div className={`user-avatar mobile-avatar avatar${avatarUrl ? " user-avatar--image" : ""}`}>
                 {avatarUrl ? (
                   <img src={avatarUrl} alt={displayName ? `${displayName} profile` : "Player profile"} />
                 ) : (
diff --git a/src/index.css b/src/index.css
index 4f6e1129..bc13901f 100644
--- a/src/index.css
+++ b/src/index.css
@@ -26,7 +26,7 @@
   --coach-color-focus: #bbd4ff;
 
   color: var(--coach-color-heading);
-  font-family: "Inter", "SF Pro Text", "Segoe UI", system-ui, -apple-system, sans-serif;
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
   font-weight: 400;
   line-height: 1.5;
   text-rendering: optimizeLegibility;
diff --git a/src/pages/DashboardPage.jsx b/src/pages/DashboardPage.jsx
index 3569fcc8..f830cc63 100644
--- a/src/pages/DashboardPage.jsx
+++ b/src/pages/DashboardPage.jsx
@@ -1,19 +1,16 @@
 import moment from "moment";
-import { useEffect, useMemo, useState } from "react";
-import { Clock, MapPin, Users, Zap, X } from "lucide-react";
-import { useNavigate } from "react-router-dom";
+import { useEffect, useMemo, useRef, useState } from "react";
+import { CalendarDays, ChevronLeft, ChevronRight, Clock3, MapPin, Star } from "lucide-react";
+import { NavLink, useNavigate } from "react-router-dom";
 import { getPlayerFutureGroupLessons, getPlayerFutureLessons } from "../api/playerHome";
 import MainLayout from "../components/MainLayout";
-import usePlayerIdentity from "../hooks/usePlayerIdentity";
 import { getStoredAuthToken } from "../services/authToken";
 
 const pickString = (...values) => {
   for (const value of values) {
     if (typeof value === "string") {
       const trimmed = value.trim();
-      if (trimmed) {
-        return trimmed;
-      }
+      if (trimmed) return trimmed;
     }
   }
   return null;
@@ -22,36 +19,7 @@ const pickString = (...values) => {
 const parseDate = (value) => {
   if (!value) return null;
   const date = moment(value);
-  if (!date.isValid()) {
-    return null;
-  }
-  return date.toDate();
-};
-
-const formatDurationLabel = (startAt, endAt) => {
-  if (!startAt || !endAt) return null;
-  const minutes = Math.round((endAt.getTime() - startAt.getTime()) / 60000);
-  if (!Number.isFinite(minutes) || minutes <= 0) return null;
-  const hours = Math.floor(minutes / 60);
-  const remainingMinutes = minutes % 60;
-  if (hours && remainingMinutes) {
-    return `${hours} hr ${remainingMinutes} min`;
-  }
-  if (hours) {
-    return `${hours} hr${hours > 1 ? "s" : ""}`;
-  }
-  return `${minutes} min`;
-};
-
-const formatStatusLabel = (value) => {
-  if (!value) return null;
-  return value
-    .toString()
-    .replace(/[_]+/g, " ")
-    .split(/\s+/)
-    .filter(Boolean)
-    .map((word) => word.charAt(0).toUpperCase() + word.slice(1).toLowerCase())
-    .join(" ");
+  return date.isValid() ? date.toDate() : null;
 };
 
 const extractLessons = (response) => {
@@ -64,173 +32,79 @@ const extractLessons = (response) => {
 
 const buildScheduleItems = (lessons = [], type) =>
   lessons
-    .map((lesson) => {
+    .map((lesson, index) => {
       const startAt = parseDate(
-        lesson.startTime ??
-          lesson.start_time ??
-          lesson.start_at ??
-          lesson.start ??
-          lesson.startDate ??
-          lesson.starts_at,
-      );
-      const endAt = parseDate(
-        lesson.endTime ??
-          lesson.end_time ??
-          lesson.end_at ??
-          lesson.end ??
-          lesson.endDate ??
-          lesson.ends_at,
+        lesson.startTime ?? lesson.start_time ?? lesson.start_at ?? lesson.start ?? lesson.startDate,
       );
-
-      const idSource =
-        lesson.id ??
-        lesson.lesson_id ??
-        lesson.lessonId ??
-        lesson.booking_id ??
-        lesson.uuid ??
-        lesson.slug ??
-        (startAt ? `${type}-${startAt.toISOString()}` : null);
-      const id = `${type}-${idSource ?? Math.random().toString(36).slice(2)}`;
-
+      const id = `${type}-${lesson.id ?? lesson.lesson_id ?? lesson.lessonId ?? index}`;
       const coach = lesson.coach ?? lesson.instructor ?? lesson.pro ?? {};
-      const coachFullName = [coach.firstName ?? coach.first_name, coach.lastName ?? coach.last_name]
-        .filter((part) => typeof part === "string" && part.trim())
-        .join(" ");
       const coachName =
         pickString(
           lesson.coach_name,
           lesson.coachName,
-          lesson.instructor_name,
-          coachFullName,
           coach.name,
           coach.full_name,
-          coach.fullName,
-        ) || null;
-      const coachLabel =
-        coachName && /^coach\s+/i.test(coachName)
-          ? coachName
-          : coachName
-            ? `Coach ${coachName}`
-            : null;
-
-      const locationLabel =
-        pickString(
-          lesson.location_name,
-          lesson.locationName,
-          lesson.location,
-          lesson.location_label,
-          lesson.locationLabel,
-          lesson.court_name,
-          lesson.court,
-          lesson.facility_name,
-          lesson.facility,
-          lesson.address,
-          lesson.venue_name,
-          lesson.venueName,
-        ) ||
-        pickString(
-          lesson?.location?.name,
-          lesson?.location?.title,
-          lesson?.location?.label,
-          lesson?.venue?.name,
-          lesson?.venue?.title,
-          lesson?.coach_location?.name,
-        );
-
-      const rawStatus =
-        pickString(lesson.status, lesson.registration_status, lesson.booking_status, lesson.lesson_status) ||
-        null;
-      const statusLabel = rawStatus ? formatStatusLabel(rawStatus) : null;
-
-      const title =
-        pickString(
-          lesson.title,
-          lesson.lesson_title,
-          lesson.name,
-          lesson.lesson_name,
-          lesson.program_name,
-          lesson.series_name,
-          lesson.description,
-        ) || (type === "group" ? "Group Session" : "Private Lesson");
-
-      const badgeLabel =
-        type === "group"
-          ? "Group Session"
-          : pickString(
-              lesson.program_type,
-              lesson.programName,
-              lesson.program_label,
-              lesson.category,
-              lesson.type,
-            );
-
-      const durationLabel = formatDurationLabel(startAt, endAt);
-      const dayLabel = startAt ? moment(startAt).format("ddd, MMM D") : null;
-      const timeRangeLabel =
-        startAt && endAt
-          ? `${moment(startAt).format("h:mm A")} – ${moment(endAt).format("h:mm A")}`
-          : startAt
-            ? moment(startAt).format("h:mm A")
-            : null;
+          [coach.first_name, coach.last_name].filter(Boolean).join(" "),
+        ) ?? "Coach";
 
       return {
         id,
-        title,
-        coachLabel,
-        locationLabel: locationLabel ?? "Location TBD",
-        statusLabel,
-        badgeLabel,
-        startAt,
-        endAt,
-        timeLabel: dayLabel ?? "Date TBD",
-        secondaryLabel: timeRangeLabel ?? "Time TBD",
-        durationLabel,
+        title: pickString(lesson.title, lesson.name, lesson.lesson_name, lesson.program_name) ?? "Session",
+        locationLabel:
+          pickString(
+            lesson.location_name,
+            lesson.location,
+            lesson.court_name,
+            lesson.facility_name,
+            lesson.venue_name,
+            lesson?.location?.name,
+          ) ?? "Location TBD",
+        time: startAt ? moment(startAt).format("h:mm A") : "TBD",
+        meridiem: startAt ? moment(startAt).format("A") : "",
         type,
+        coachLabel: type === "lesson" ? `w/ ${coachName.replace(/^coach\s+/i, "")}` : null,
       };
     })
     .filter(Boolean);
 
 const activityTypeMeta = {
-  match: { label: "Match", emoji: "🎾", action: "Join Match" },
-  private: { label: "Private Lesson", emoji: "👤", action: "Book Now" },
-  group: { label: "Group Session", emoji: "👥", action: "Book Now" },
+  match: { label: "MATCH", icon: "🎾", typeClass: "match", button: "Join" },
+  private: { label: "PRIVATE LESSON", icon: "🎓", typeClass: "lesson", button: "Book" },
+  group: { label: "GROUP SESSION", icon: "👥", typeClass: "group", button: "Book" },
 };
 
 const activities = [
   {
     id: "activity-match-1",
     type: "match",
-    title: "Sunset Rally at Riverside Courts",
-    venue: "Riverside Courts",
-    distance: "2.4 mi",
+    title: "Saturday Morning Doubles",
+    venue: "Penmar Courts",
+    distance: "1.2 mi",
     level: "USTA 4.0",
-    durationMinutes: 90,
     spotsRemaining: 2,
     price: "$18",
     badge: "Starting Soon",
-    startTime: moment().startOf("hour").add(2, "hours").toISOString(),
+    startTime: moment().add(2, "hours").toISOString(),
   },
   {
     id: "activity-private-1",
     type: "private",
     title: "Coach Maria — Serve Technique",
-    venue: "LA Tennis Complex",
+    venue: "LA Tennis Club",
     distance: "3.1 mi",
     level: "All Levels",
-    durationMinutes: 60,
     spotsRemaining: 1,
     price: "$95",
     badge: "Featured",
-    startTime: moment().add(1, "day").startOf("hour").add(9, "hours").toISOString(),
+    startTime: moment().add(1, "day").hour(16).minute(0).toISOString(),
   },
   {
     id: "activity-group-1",
     type: "group",
-    title: "Cardio Tennis Workout",
-    venue: "Fitness Center Courts",
+    title: "Cardio Tennis — Evening",
+    venue: "Venice Beach",
     distance: "1.8 mi",
     level: "All Levels",
-    durationMinutes: 60,
     spotsRemaining: 5,
     price: "$25",
     badge: "Popular",
@@ -239,655 +113,91 @@ const activities = [
   {
     id: "activity-match-2",
     type: "match",
-    title: "Mixed Doubles Ladder Night",
-    venue: "City Center Courts",
-    distance: "5.2 mi",
-    level: "Level 3.5 - 4.0",
-    durationMinutes: 120,
-    spotsRemaining: 4,
-    price: "$20",
-    startTime: moment().add(2, "days").hour(19).minute(30).toISOString(),
-  },
-  {
-    id: "activity-private-2",
-    type: "private",
-    title: "Coach David — Match Strategy",
-    venue: "Downtown Racquet Club",
-    distance: "4.0 mi",
-    level: "USTA 3.5+",
-    durationMinutes: 90,
-    spotsRemaining: 1,
-    price: "$110",
-    startTime: moment().add(3, "days").hour(9).minute(0).toISOString(),
-  },
-  {
-    id: "activity-group-2",
-    type: "group",
-    title: "Doubles Strategy Clinic",
-    venue: "Harbor Point Club",
-    distance: "7.4 mi",
-    level: "Intermediate",
-    durationMinutes: 75,
-    spotsRemaining: 3,
-    price: "$32",
-    startTime: moment().add(4, "days").hour(18).minute(30).toISOString(),
-  },
-  {
-    id: "activity-group-3",
-    type: "group",
-    title: "Junior Development Squad",
-    venue: "Meadowbrook Courts",
-    distance: "9.2 mi",
-    level: "Ages 12-15",
-    durationMinutes: 90,
-    spotsRemaining: 6,
-    price: "$28",
-    startTime: moment().add(5, "days").hour(8).minute(30).toISOString(),
-  },
-  {
-    id: "activity-match-3",
-    type: "match",
-    title: "Competitive Singles at Beverly Hills Club",
-    venue: "Beverly Hills Club",
-    distance: "6.5 mi",
-    level: "USTA 4.5",
-    durationMinutes: 90,
+    title: "Singles Practice — Intermediate",
+    venue: "Mar Vista",
+    distance: "2.4 mi",
+    level: "USTA 3.5",
     spotsRemaining: 1,
-    price: "$22",
-    badge: "Last Spots",
-    startTime: moment().add(6, "days").hour(10).minute(0).toISOString(),
-  },
-];
-
-const quickBookCoaches = [
-  {
-    id: "quick-book-1",
-    name: "Mia Roberts",
-    rating: "4.9",
-    specialty: "Serve & Return",
-    nextAvailable: "Today · 6:00 PM",
-    price: "$95",
-  },
-  {
-    id: "quick-book-2",
-    name: "David Park",
-    rating: "4.8",
-    specialty: "High Performance",
-    nextAvailable: "Today · 7:30 PM",
-    price: "$105",
-  },
-  {
-    id: "quick-book-3",
-    name: "Jamie Lee",
-    rating: "4.9",
-    specialty: "Junior Development",
-    nextAvailable: "Tomorrow · 8:00 AM",
-    price: "$90",
-  },
-  {
-    id: "quick-book-4",
-    name: "Carlos Ramirez",
-    rating: "4.7",
-    specialty: "Serve Specialist",
-    nextAvailable: "Tomorrow · 4:45 PM",
-    price: "$88",
-  },
-  {
-    id: "quick-book-5",
-    name: "Ava Patel",
-    rating: "5.0",
-    specialty: "Doubles Strategy",
-    nextAvailable: "Friday · 5:15 PM",
-    price: "$120",
-  },
-];
-
-const formatRelativeStartLabel = (startTime) => {
-  const startMoment = moment(startTime);
-  const now = moment();
-  const diffMinutes = Math.max(0, startMoment.diff(now, "minutes"));
-
-  if (diffMinutes === 0) {
-    return "Starting now";
-  }
-
-  const hours = Math.floor(diffMinutes / 60);
-  const minutes = diffMinutes % 60;
-
-  if (hours && minutes) {
-    return `${hours}h ${minutes}m`;
-  }
-
-  if (hours) {
-    return `${hours}h`;
-  }
-
-  return `${minutes}m`;
-};
-
-const ActivityCard = ({ activity }) => {
-  const meta = activityTypeMeta[activity.type];
-  const startMoment = moment(activity.startTime);
-  const today = moment();
-  const isToday = startMoment.isSame(today, "day");
-  const isTomorrow = startMoment.isSame(today.clone().add(1, "day"), "day");
-  const dayLabel = isToday ? "Today" : isTomorrow ? "Tomorrow" : startMoment.format("ddd");
-  const relativeLabel = formatRelativeStartLabel(activity.startTime);
-  const spotsLabel =
-    typeof activity.spotsRemaining === "number"
-      ? `${activity.spotsRemaining} spot${activity.spotsRemaining === 1 ? "" : "s"} left`
-      : null;
-
-  return (
-    <article className={`activity-card activity-card--${activity.type}`}>
-      <header className="activity-card__header">
-        <div className="activity-card__type">
-          <span className="activity-card__type-icon" aria-hidden="true">
-            {meta.emoji}
-          </span>
-          <span>{meta.label}</span>
-        </div>
-        {activity.badge ? <span className="activity-card__badge">{activity.badge}</span> : null}
-      </header>
-      <h3 className="activity-card__title">{activity.title}</h3>
-      <div className="activity-card__info">
-        <div className="activity-card__info-row">
-          <Clock size={16} strokeWidth={2} />
-          <span>
-            {dayLabel} · {startMoment.format("h:mm A")}
-          </span>
-          <span className="activity-card__dot" aria-hidden="true">
-            •
-          </span>
-          <span>{relativeLabel}</span>
-        </div>
-        <div className="activity-card__info-row">
-          <MapPin size={16} strokeWidth={2} />
-          <span>{activity.venue}</span>
-          {activity.distance ? (
-            <>
-              <span className="activity-card__dot" aria-hidden="true">
-                •
-              </span>
-              <span>{activity.distance}</span>
-            </>
-          ) : null}
-        </div>
-        <div className="activity-card__info-row">
-          <Users size={16} strokeWidth={2} />
-          <span>{activity.level}</span>
-          {activity.durationMinutes ? (
-            <>
-              <span className="activity-card__dot" aria-hidden="true">
-                •
-              </span>
-              <span>{`${activity.durationMinutes} min`}</span>
-            </>
-          ) : null}
-        </div>
-      </div>
-      <footer className="activity-card__footer">
-        <div className="activity-card__footer-details">
-          {spotsLabel ? <span className="activity-card__spots">{spotsLabel}</span> : null}
-          {activity.price ? <span className="activity-card__price">{activity.price}</span> : null}
-        </div>
-        <button type="button" className="activity-card__action">
-          {meta.action}
-        </button>
-      </footer>
-    </article>
-  );
-};
-
-const QuickBookButton = ({ onClick, isOpen }) => (
-  <button
-    type="button"
-    className={`quick-book-button${isOpen ? " is-active" : ""}`}
-    onClick={onClick}
-    aria-label="Quick Book"
-  >
-    <Zap size={22} strokeWidth={2} />
-    <span>Quick Book</span>
-  </button>
-);
-
-const QuickBookModal = ({ coaches, onClose }) => (
-  <div className="quick-book-overlay" role="dialog" aria-modal="true" aria-labelledby="quick-book-title">
-    <div className="quick-book-overlay__backdrop" onClick={onClose} />
-    <div className="quick-book-modal" role="document">
-      <header className="quick-book-modal__header">
-        <div>
-          <h2 id="quick-book-title">Quick Book a Lesson</h2>
-          <p className="quick-book-modal__subtitle">
-            Book with one of our featured coaches right now
-          </p>
-        </div>
-        <button type="button" className="quick-book-modal__close" onClick={onClose} aria-label="Close">
-          <X size={18} strokeWidth={2} />
-        </button>
-      </header>
-      <div className="quick-book-modal__body">
-        {coaches.map((coach) => (
-          <article key={coach.id} className="quick-book-coach">
-            <div className="quick-book-coach__avatar" aria-hidden="true">
-              {coach.name
-                .split(" ")
-                .map((part) => part.charAt(0))
-                .join("")}
-            </div>
-            <div className="quick-book-coach__details">
-              <div className="quick-book-coach__top-row">
-                <span className="quick-book-coach__name">{coach.name}</span>
-                <span className="quick-book-coach__rating">⭐ {coach.rating}</span>
-              </div>
-              <div className="quick-book-coach__specialty">{coach.specialty}</div>
-              <div className="quick-book-coach__availability">Next available · <span>{coach.nextAvailable}</span></div>
-            </div>
-            <div className="quick-book-coach__cta">
-              <div className="quick-book-coach__price">{coach.price}</div>
-              <button type="button" className="quick-book-coach__button">
-                Book Now
-              </button>
-            </div>
-          </article>
-        ))}
-      </div>
-      <footer className="quick-book-modal__footer">
-        <button type="button" className="quick-book-modal__link">
-          View All Coaches →
-        </button>
-      </footer>
-    </div>
-  </div>
-);
-
-const matches = [
-  {
-    type: "Doubles",
-    title: "Friendly Ladder",
-    details: ["Tomorrow • 6:30 PM", "Court 4 • 2 spots left"],
-  },
-  {
-    type: "Singles",
-    title: "Skill Challenge",
-    details: ["Thursday • 5:00 PM", "Court 1 • Intermediate"],
-  },
-  {
-    type: "Cardio",
-    title: "Endurance Clinic",
-    details: ["Saturday • 9:00 AM", "Fitness Center • 6 spots"],
-  },
-];
-
-const coaches = [
-  { name: "Mia Roberts", speciality: "USTA Certified", rating: "4.9", sessions: "32 lessons" },
-  { name: "David Park", speciality: "High Performance", rating: "4.8", sessions: "28 lessons" },
-  { name: "Jamie Lee", speciality: "Junior Development", rating: "4.9", sessions: "19 lessons" },
-  { name: "Carlos Ramirez", speciality: "Serve Specialist", rating: "4.7", sessions: "24 lessons" },
-];
-
-const bottomActions = [
-  {
-    title: "AI Match Me",
-    description: "Get matched instantly with players at your level.",
-    action: "Start",
-    accent: "#16a34a",
-  },
-  {
-    title: "Get Gear",
-    description: "Shop curated gear recommended by pros.",
-    action: "Shop",
-    accent: "#f97316",
+    price: "Free",
+    startTime: moment().add(2, "days").hour(14).minute(0).toISOString(),
   },
 ];
 
 const DashboardPage = () => {
   const navigate = useNavigate();
-  const { displayName } = usePlayerIdentity();
-  const [locationState, setLocationState] = useState({
-    status: "idle",
-    coords: null,
-    error: null,
-    accuracyMiles: null,
-    locationName: null,
-    lookupFailed: false,
-  });
+  const datePickerRef = useRef(null);
+  const [locationState, setLocationState] = useState({ status: "idle", locationName: null });
   const [distanceFilter, setDistanceFilter] = useState("10");
-  const [scheduleState, setScheduleState] = useState({
-    status: "idle",
-    items: [],
-    error: null,
-  });
+  const distanceOptions = ["5", "10", "15", "20"];
+  const [scheduleState, setScheduleState] = useState({ status: "idle", items: [], error: null });
   const [dateFilter, setDateFilter] = useState({ type: "all" });
-  const [isCustomRangeOpen, setIsCustomRangeOpen] = useState(false);
-  const [customRangeStart, setCustomRangeStart] = useState("");
-  const [customRangeEnd, setCustomRangeEnd] = useState("");
-  const [customRangeError, setCustomRangeError] = useState(null);
   const [activeFilter, setActiveFilter] = useState("all");
-  const [showAllActivities, setShowAllActivities] = useState(false);
-  const [showQuickBook, setShowQuickBook] = useState(false);
+  const [weekOffset, setWeekOffset] = useState(0);
 
-  const distanceOptions = ["5", "10", "15", "20", "all"];
-  const todayAnchor = useMemo(() => moment().startOf("day"), []);
-  const todayIso = useMemo(() => todayAnchor.format("YYYY-MM-DD"), [todayAnchor]);
-  const maxSelectableDate = useMemo(
-    () => todayAnchor.clone().add(30, "days").format("YYYY-MM-DD"),
-    [todayAnchor],
-  );
+  const weekStart = useMemo(() => moment().startOf("day").add(weekOffset * 7, "days"), [weekOffset]);
 
   const dayOptions = useMemo(() => {
-    const countsByDay = activities.reduce((accumulator, activity) => {
+    const countsByDay = activities.reduce((acc, activity) => {
       const key = moment(activity.startTime).startOf("day").format("YYYY-MM-DD");
-      accumulator[key] = (accumulator[key] || 0) + 1;
-      return accumulator;
+      acc[key] = (acc[key] || 0) + 1;
+      return acc;
     }, {});
 
-    return Array.from({ length: 14 }).map((_, index) => {
-      const dayMoment = todayAnchor.clone().add(index, "days");
+    return Array.from({ length: 5 }).map((_, index) => {
+      const dayMoment = weekStart.clone().add(index, "days");
       const key = dayMoment.format("YYYY-MM-DD");
-      const isToday = index === 0;
-      const isTomorrow = index === 1;
-
+      const isToday = dayMoment.isSame(moment(), "day");
       return {
         value: key,
-        label: isToday ? "Today" : isTomorrow ? "Tomorrow" : dayMoment.format("ddd"),
+        label: index === 0 && weekOffset === 0 ? "TODAY" : dayMoment.format("ddd").toUpperCase(),
         date: dayMoment.format("D"),
         events: countsByDay[key] || 0,
-        fullLabel: `${dayMoment.format("ddd, MMM D")}`,
+        isToday,
       };
     });
-  }, [todayAnchor]);
-
-  const scopedActivities = useMemo(() => {
-    return activities.filter((activity) => {
-      if (dateFilter.type === "all") {
-        return true;
-      }
-
-      const activityDay = moment(activity.startTime).startOf("day");
-
-      if (dateFilter.type === "day") {
-        return activityDay.format("YYYY-MM-DD") === dateFilter.iso;
-      }
-
-      const rangeStart = moment(dateFilter.start).startOf("day");
-      const rangeEnd = moment(dateFilter.end).endOf("day");
-      return activityDay.isBetween(rangeStart, rangeEnd, undefined, "[]");
-    });
-  }, [dateFilter]);
+  }, [weekOffset, weekStart]);
+
+  const scopedActivities = useMemo(
+    () =>
+      activities.filter((activity) => {
+        if (dateFilter.type === "all") return true;
+        return moment(activity.startTime).format("YYYY-MM-DD") === dateFilter.iso;
+      }),
+    [dateFilter],
+  );
 
-  const typeCounts = useMemo(() => {
-    const base = scopedActivities;
-    return {
-      all: base.length,
-      match: base.filter((activity) => activity.type === "match").length,
-      private: base.filter((activity) => activity.type === "private").length,
-      group: base.filter((activity) => activity.type === "group").length,
-    };
-  }, [scopedActivities]);
+  const typeCounts = useMemo(
+    () => ({
+      all: scopedActivities.length,
+      match: scopedActivities.filter((activity) => activity.type === "match").length,
+      private: scopedActivities.filter((activity) => activity.type === "private").length,
+      group: scopedActivities.filter((activity) => activity.type === "group").length,
+    }),
+    [scopedActivities],
+  );
 
-  const typeFilterOptions = [
-    { id: "all", label: "All Activities" },
-    { id: "match", label: "Matches" },
-    { id: "private", label: "Private Lessons" },
-    { id: "group", label: "Group Sessions" },
-  ];
+  const filteredActivities = useMemo(
+    () =>
+      scopedActivities.filter((activity) => activeFilter === "all" || activity.type === activeFilter),
+    [activeFilter, scopedActivities],
+  );
 
-  const filteredActivities = useMemo(() => {
-    return scopedActivities
-      .filter((activity) => activeFilter === "all" || activity.type === activeFilter)
-      .sort((first, second) =>
-        moment(first.startTime).valueOf() - moment(second.startTime).valueOf(),
-      );
-  }, [activeFilter, scopedActivities]);
+  const stats = useMemo(
+    () => ({
+      matches: activities.filter((item) => item.type === "match").length * 3,
+      rating: "4.0",
+      lessons: activities.filter((item) => item.type !== "match").length * 2,
+      connections: 24,
+    }),
+    [],
+  );
 
   useEffect(() => {
-    setShowAllActivities(false);
-  }, [activeFilter, dateFilter]);
-
-  const displayedActivities = showAllActivities
-    ? filteredActivities
-    : filteredActivities.slice(0, 3);
-  const remainingActivityCount = filteredActivities.length - displayedActivities.length;
-
-  const selectedDayMeta =
-    dateFilter.type === "day"
-      ? dayOptions.find((option) => option.value === dateFilter.iso) ?? null
-      : null;
-
-  const dateFilterChipLabel = (() => {
-    if (dateFilter.type === "all") {
-      return "All Days";
-    }
-    if (dateFilter.type === "day") {
-      return selectedDayMeta?.fullLabel ?? "Selected Day";
-    }
-    const startLabel = moment(dateFilter.start).format("ddd, MMM D");
-    const endLabel = moment(dateFilter.end).format("ddd, MMM D");
-    return startLabel === endLabel ? startLabel : `${startLabel} – ${endLabel}`;
-  })();
-
-  const customRangeButtonLabel = (() => {
-    if (dateFilter.type !== "range") {
-      return "Choose dates";
-    }
-    const startLabel = moment(dateFilter.start).format("MMM D");
-    const endLabel = moment(dateFilter.end).format("MMM D");
-    const summary = startLabel === endLabel ? startLabel : `${startLabel} – ${endLabel}`;
-    return `Custom: ${summary}`;
-  })();
-
-  const emptyStateMessage = (() => {
-    if (dateFilter.type === "all") {
-      return "Try adjusting your filters to discover more sessions.";
-    }
-    if (dateFilter.type === "day") {
-      const label = selectedDayMeta?.fullLabel ?? "this day";
-      return `Nothing is scheduled for ${label} with these filters. Try expanding your search.`;
-    }
-    const startFull = moment(dateFilter.start).format("ddd, MMM D");
-    const endFull = moment(dateFilter.end).format("ddd, MMM D");
-    if (dateFilter.start === dateFilter.end) {
-      return `Nothing is scheduled for ${startFull} with these filters. Try expanding your search.`;
-    }
-    return `Nothing is scheduled from ${startFull} to ${endFull} with these filters. Try expanding your search.`;
-  })();
-
-  const activeFilterLabel =
-    activeFilter === "all"
-      ? "All Activities"
-      : activityTypeMeta[activeFilter]?.label ?? "All Activities";
-
-  const hasActiveFilters = dateFilter.type !== "all" || activeFilter !== "all";
-
-  const clearFilters = () => {
-    setDateFilter({ type: "all" });
-    setActiveFilter("all");
-    setIsCustomRangeOpen(false);
-    setCustomRangeStart("");
-    setCustomRangeEnd("");
-    setCustomRangeError(null);
-  };
-
-  const handleToggleCustomRange = () => {
-    setIsCustomRangeOpen((open) => {
-      if (open) {
-        setCustomRangeError(null);
-        return false;
-      }
-
-      if (dateFilter.type === "range") {
-        setCustomRangeStart(dateFilter.start);
-        setCustomRangeEnd(dateFilter.end);
-      } else if (dateFilter.type === "day") {
-        setCustomRangeStart(dateFilter.iso);
-        setCustomRangeEnd(dateFilter.iso);
-      } else {
-        setCustomRangeStart(todayIso);
-        setCustomRangeEnd(todayIso);
-      }
-
-      setCustomRangeError(null);
-      return true;
-    });
-  };
-
-  const handleApplyCustomRange = () => {
-    if (!customRangeStart || !customRangeEnd) {
-      setCustomRangeError("Select both a start and end date.");
-      return;
-    }
-    if (customRangeStart > customRangeEnd) {
-      setCustomRangeError("Start date must be before the end date.");
-      return;
-    }
-    setCustomRangeError(null);
-    setDateFilter({ type: "range", start: customRangeStart, end: customRangeEnd });
-    setIsCustomRangeOpen(false);
-  };
-
-  const handleClearCustomRange = () => {
-    setCustomRangeStart("");
-    setCustomRangeEnd("");
-    setCustomRangeError(null);
-    setDateFilter({ type: "all" });
-    setIsCustomRangeOpen(false);
-  };
-
-  const formatDistanceLabel = (value) => (value === "all" ? "All" : `${value} mi`);
-
-  const formatCoordinatesLabel = (coords) => {
-    if (!coords) {
-      return "Your area";
-    }
-
-    const latitude = Math.abs(coords.latitude).toFixed(2);
-    const longitude = Math.abs(coords.longitude).toFixed(2);
-    const latHemisphere = coords.latitude >= 0 ? "N" : "S";
-    const lonHemisphere = coords.longitude >= 0 ? "E" : "W";
-
-    return `${latitude}° ${latHemisphere}, ${longitude}° ${lonHemisphere}`;
-  };
-
-  const resolveLocationName = async (coords) => {
-    if (!coords) {
-      return;
-    }
-
-    try {
-      const query = new URLSearchParams({
-        format: "jsonv2",
-        lat: coords.latitude.toString(),
-        lon: coords.longitude.toString(),
-      });
-
-      const response = await fetch(`https://nominatim.openstreetmap.org/reverse?${query.toString()}`, {
-        headers: {
-          Accept: "application/json",
-        },
-      });
-
-      if (!response.ok) {
-        throw new Error("Failed to lookup location");
-      }
-
-      const data = await response.json();
-      const address = data?.address ?? {};
-
-      const locality =
-        address.city ||
-        address.town ||
-        address.village ||
-        address.hamlet ||
-        address.suburb ||
-        address.county;
-      const region = address.state || address.region;
-      const countryCode = address.country_code ? address.country_code.toUpperCase() : null;
-
-      const labelParts = [locality, region, countryCode].filter(Boolean);
-      const locationLabel = labelParts.length
-        ? labelParts.join(", ")
-        : data?.display_name?.split(",").slice(0, 2).join(", ") || null;
-
-      setLocationState((previous) => {
-        if (previous.status !== "ready") {
-          return previous;
-        }
-
-        return {
-          ...previous,
-          locationName: locationLabel,
-          lookupFailed: !locationLabel,
-        };
-      });
-    } catch (error) {
-      console.error("Failed to resolve location", error);
-      setLocationState((previous) => {
-        if (previous.status !== "ready") {
-          return previous;
-        }
-
-        return {
-          ...previous,
-          locationName: null,
-          lookupFailed: true,
-        };
-      });
-    }
-  };
-
-  const detectLocation = () => {
-    if (!("geolocation" in navigator)) {
-      setLocationState({
-        status: "error",
-        coords: null,
-        error: "Location services are not supported in this browser.",
-        accuracyMiles: null,
-        locationName: null,
-        lookupFailed: false,
-      });
-      return;
-    }
-
-    setLocationState((previous) => ({
-      ...previous,
-      status: "loading",
-      error: null,
-      lookupFailed: false,
-    }));
-
+    if (!navigator.geolocation) return;
     navigator.geolocation.getCurrentPosition(
-      (position) => {
-        const { coords } = position;
-        const accuracyMiles = coords.accuracy
-          ? Math.max(1, Math.round(coords.accuracy / 1609.34))
-          : null;
-
-        setLocationState({
-          status: "ready",
-          coords,
-          error: null,
-          accuracyMiles,
-          locationName: null,
-          lookupFailed: false,
-        });
-        resolveLocationName(coords);
-      },
-      (error) => {
-        setLocationState({
-          status: "error",
-          coords: null,
-          error: error.message || "We couldn't determine your location.",
-          accuracyMiles: null,
-          locationName: null,
-          lookupFailed: false,
-        });
-      }
+      () => setLocationState({ status: "ready", locationName: "Los Angeles" }),
+      () => setLocationState({ status: "error", locationName: "Location unavailable" }),
     );
-  };
-
-  useEffect(() => {
-    detectLocation();
   }, []);
 
   useEffect(() => {
@@ -901,12 +211,7 @@ const DashboardPage = () => {
         return;
       }
 
-      setScheduleState((previous) => ({
-        ...previous,
-        status: "loading",
-        error: null,
-      }));
-
+      setScheduleState((prev) => ({ ...prev, status: "loading", error: null }));
       try {
         const [lessonsResponse, groupLessonsResponse] = await Promise.all([
           getPlayerFutureLessons({ token, perPage: 5, signal: controller.signal }),
@@ -917,28 +222,10 @@ const DashboardPage = () => {
 
         const privateLessons = buildScheduleItems(extractLessons(lessonsResponse), "lesson");
         const groupLessons = buildScheduleItems(extractLessons(groupLessonsResponse), "group");
-        const combined = [...privateLessons, ...groupLessons].sort((a, b) => {
-          if (a.startAt && b.startAt) {
-            return a.startAt.getTime() - b.startAt.getTime();
-          }
-          if (a.startAt) return -1;
-          if (b.startAt) return 1;
-          return 0;
-        });
 
-        const annotated = combined.map((item, index) => ({
-          ...item,
-          highlight: index === 0 && !!item.startAt,
-        }));
-
-        setScheduleState({
-          status: "ready",
-          items: annotated,
-          error: null,
-        });
+        setScheduleState({ status: "ready", items: [...privateLessons, ...groupLessons].slice(0, 3), error: null });
       } catch (error) {
         if (cancelled) return;
-        console.error("Failed to load upcoming lessons", error);
         setScheduleState({
           status: "error",
           items: [],
@@ -955,407 +242,259 @@ const DashboardPage = () => {
     };
   }, []);
 
-  const locationChipLabel = () => {
-    if (locationState.status === "ready") {
-      if (locationState.locationName) {
-        return locationState.locationName;
-      }
-
-      if (locationState.coords) {
-        return formatCoordinatesLabel(locationState.coords);
-      }
-
-      return "Los Angeles, California, US";
-    }
 
-    if (locationState.status === "loading") {
-      return "Locating…";
-    }
+  const openDatePicker = () => {
+    const input = datePickerRef.current;
+    if (!input) return;
 
-    if (locationState.status === "error") {
-      return "Location unavailable";
+    if (typeof input.showPicker === "function") {
+      input.showPicker();
+      return;
     }
 
-    return "Los Angeles, California, US";
+    input.focus();
+    input.click();
   };
 
+  const filterOptions = [
+    { id: "all", label: "All" },
+    { id: "match", label: "Matches" },
+    { id: "private", label: "Lessons" },
+    { id: "group", label: "Groups" },
+  ];
+
   return (
     <MainLayout>
-      <section className="play-hero">
-        <div className="play-hero__intro">
-          <div className="play-hero__lead">
-            <div className="play-hero__text">
-              <p className="play-hero__eyebrow">Ready to Play?</p>
-              <h1>Welcome back, {displayName}. Let&rsquo;s get you on court.</h1>
-              <p className="play-hero__subtitle">
-                Discover curated matches, lessons, and group sessions tailored to your level and
-                schedule.
-              </p>
-            </div>
-            <div
-              className={`play-hero__location-surface play-hero__location-surface--${locationState.status}`}
-            >
-              <div className="play-hero__location-row">
-                <div className="play-hero__location-group">
-                  <button
-                    type="button"
-                    className={`play-hero__distance-chip play-hero__distance-chip--location play-hero__distance-chip--${locationState.status}`}
-                    aria-label="Current location"
-                    onClick={detectLocation}
-                    disabled={locationState.status === "loading"}
-                  >
-                    <MapPin size={16} strokeWidth={2} />
-                    <span>{locationChipLabel()}</span>
-                  </button>
-                  {distanceOptions.map((value) => (
-                    <button
-                      key={value}
-                      type="button"
-                      className={`play-hero__distance-chip${distanceFilter === value ? " play-hero__distance-chip--active" : ""}`}
-                      onClick={() => setDistanceFilter(value)}
-                    >
-                      {formatDistanceLabel(value)}
-                    </button>
-                  ))}
-                </div>
-              </div>
-              <div className="day-selector">
-                <div className="day-selector__controls">
-                  <div
-                    className="day-selector__scroller"
-                    role="group"
-                    aria-label="Filter activities by day"
-                  >
-                    <button
-                      type="button"
-                      className={`day-selector__day${dateFilter.type === "all" ? " is-active" : ""}`}
-                      onClick={() => {
-                        setDateFilter({ type: "all" });
-                        setIsCustomRangeOpen(false);
-                        setCustomRangeStart("");
-                        setCustomRangeEnd("");
-                        setCustomRangeError(null);
-                      }}
-                    >
-                      <span className="day-selector__label">All</span>
-                      <span className="day-selector__events">{activities.length} events</span>
-                    </button>
-                    {dayOptions.map((day) => {
-                      const classes = ["day-selector__day"];
-                      if (dateFilter.type === "day" && dateFilter.iso === day.value) {
-                        classes.push("is-active");
-                      }
-                      if (day.events === 0) {
-                        classes.push("is-empty");
-                      }
-                      return (
-                        <button
-                          key={day.value}
-                          type="button"
-                          className={classes.join(" ")}
-                          onClick={() => {
-                            setDateFilter({ type: "day", iso: day.value });
-                            setIsCustomRangeOpen(false);
-                            setCustomRangeStart(day.value);
-                            setCustomRangeEnd(day.value);
-                            setCustomRangeError(null);
-                          }}
-                        >
-                          <span className="day-selector__label">{day.label}</span>
-                          <span className="day-selector__date">{day.date}</span>
-                          <span className="day-selector__events">
-                            {day.events} event{day.events === 1 ? "" : "s"}
-                          </span>
-                        </button>
-                      );
-                    })}
-                  </div>
-                  <div className="day-selector__actions">
-                    <button
-                      type="button"
-                      className={`day-selector__action${dateFilter.type === "range" ? " is-active" : ""}`}
-                      aria-expanded={isCustomRangeOpen}
-                      onClick={handleToggleCustomRange}
-                    >
-                      {customRangeButtonLabel}
-                    </button>
-                    <button
-                      type="button"
-                      className="day-selector__view-all"
-                      onClick={() => navigate("/player/calendar")}
-                    >
-                      View All
-                    </button>
-                  </div>
-                </div>
-                {isCustomRangeOpen ? (
-                  <div className="day-selector__range">
-                    <div className="day-selector__range-fields">
-                      <label className="day-selector__range-field">
-                        <span>Start</span>
-                        <input
-                          type="date"
-                          value={customRangeStart}
-                          min={todayIso}
-                          max={customRangeEnd || maxSelectableDate}
-                          onChange={(event) => {
-                            setCustomRangeStart(event.target.value);
-                            setCustomRangeError(null);
-                          }}
-                        />
-                      </label>
-                      <label className="day-selector__range-field">
-                        <span>End</span>
-                        <input
-                          type="date"
-                          value={customRangeEnd}
-                          min={customRangeStart || todayIso}
-                          max={maxSelectableDate}
-                          onChange={(event) => {
-                            setCustomRangeEnd(event.target.value);
-                            setCustomRangeError(null);
-                          }}
-                        />
-                      </label>
-                    </div>
-                    <p className="day-selector__range-hint">
-                      {customRangeStart && customRangeEnd
-                        ? customRangeStart === customRangeEnd
-                          ? `Showing activities for ${moment(customRangeStart).format("MMM D")}.`
-                          : `Showing activities from ${moment(customRangeStart).format("MMM D")} to ${moment(customRangeEnd).format("MMM D")}.`
-                        : "Select a start and end date to filter activities."}
-                    </p>
-                    {customRangeError ? (
-                      <p className="day-selector__range-error">{customRangeError}</p>
-                    ) : null}
-                    <div className="day-selector__range-actions">
-                      <button type="button" onClick={handleClearCustomRange}>
-                        Clear
-                      </button>
-                      <button type="button" onClick={handleApplyCustomRange}>
-                        Apply range
-                      </button>
-                    </div>
-                  </div>
-                ) : null}
+      <div className="home-redesign">
+        <div className="home-redesign__main">
+          <section className="hero-cards hero-scroll">
+            <button type="button" className="hero-card hero-card--match" onClick={() => navigate("/matches/create")}>
+              <div className="hero-icon" aria-hidden="true">🎾</div>
+              <div className="hero-content">
+                <div className="hero-title">Create a Match</div>
+                <div className="hero-subtitle">Singles or doubles play</div>
               </div>
-              <div className="type-filter-bar">
-                {typeFilterOptions.map((option) => (
-                  <button
-                    key={option.id}
-                    type="button"
-                    className={`type-filter-bar__chip${activeFilter === option.id ? " is-active" : ""}`}
-                    onClick={() => setActiveFilter(option.id)}
-                  >
-                    <span>{option.label}</span>
-                    <span className="type-filter-bar__count">{typeCounts[option.id] ?? 0}</span>
-                  </button>
-                ))}
+              <div className="hero-arrow" aria-hidden="true">→</div>
+            </button>
+            <button type="button" className="hero-card hero-card--lesson" onClick={() => navigate("/find-coaches")}>
+              <div className="hero-icon" aria-hidden="true">⭐</div>
+              <div className="hero-content">
+                <div className="hero-title">Book a Lesson</div>
+                <div className="hero-subtitle">Find a coach nearby</div>
               </div>
+              <div className="hero-arrow" aria-hidden="true">→</div>
+            </button>
+          </section>
+
+          <section className="schedule-section-mobile">
+            <div className="schedule-header-mobile">
+              <span className="schedule-title-mobile">My Schedule</span>
+              <button type="button" className="schedule-link-mobile" onClick={() => navigate("/player/calendar")}>View All →</button>
             </div>
-          </div>
-          <div className="play-hero__status">
-            <div className="play-hero__status-card">
-              <span className="play-hero__status-label">Next booking</span>
-              <span className="play-hero__status-value">Today · 5:30 PM</span>
-              <span className="play-hero__status-meta">Court 4 with Jamie</span>
+            <div className="schedule-items-mobile">
+              {scheduleState.status === "ready" && scheduleState.items.length > 0 ? (
+                scheduleState.items.map((item) => (
+                  <article key={`mobile-${item.id}`} className="schedule-item-mobile">
+                    <span className={`schedule-type ${item.type === "group" ? "group" : "lesson"}`} />
+                    <div className="schedule-time-mobile">
+                      <div className="schedule-time-value">{item.time.split(" ")[0]}</div>
+                      <div className="schedule-time-period">{item.time.split(" ")[1] ?? ""}</div>
+                    </div>
+                    <div className="schedule-content-mobile">
+                      <div className="schedule-item-title-mobile">{item.type === "lesson" ? `${item.title} ${item.coachLabel ?? ""}` : item.title}</div>
+                      <div className="schedule-meta-mobile">{item.locationLabel}</div>
+                    </div>
+                  </article>
+                ))
+              ) : (
+                <p className="sidebar-empty">No upcoming sessions yet.</p>
+              )}
             </div>
-          </div>
-        </div>
-      </section>
+          </section>
 
-      <section className="section activity-section" id="activities">
-        <div className="section-header activity-section__header">
-          <div>
-            <h2 className="section-title">Available Activities</h2>
-            <p className="section-subtitle">
-              Browse matches, lessons, and group sessions starting soon near you.
-            </p>
-          </div>
-          <button
-            type="button"
-            className="section-cta activity-section__cta"
-            onClick={() => navigate("/player/calendar")}
-          >
-            See All
-          </button>
-        </div>
-        {hasActiveFilters ? (
-          <div className="activity-active-filters">
-            <span className="activity-active-filters__label">Showing:</span>
-            <div className="activity-active-filters__chips">
-              <span className="activity-active-filters__chip">{dateFilterChipLabel}</span>
-              {activeFilter !== "all" ? (
-                <span className="activity-active-filters__chip">{activeFilterLabel}</span>
-              ) : null}
-            </div>
-            <button type="button" className="activity-active-filters__clear" onClick={clearFilters}>
-              Clear all
+          <section className="date-selector-v2">
+            <button type="button" className="date-nav-btn" onClick={() => setWeekOffset((prev) => prev - 1)}>
+              <ChevronLeft size={16} />
             </button>
-          </div>
-        ) : null}
-        {filteredActivities.length === 0 ? (
-          <div className="activity-empty-state">
-            <div className="activity-empty-state__icon" aria-hidden="true">
-              🎾
-            </div>
-            <h3>No activities scheduled</h3>
-            <p>{emptyStateMessage}</p>
-            <div className="activity-empty-state__actions">
-              <button type="button" className="activity-empty-state__primary" onClick={clearFilters}>
-                View All Activities
+            <button
+              type="button"
+              className={`date-option${dateFilter.type === "all" ? " selected" : ""}`}
+              onClick={() => setDateFilter({ type: "all" })}
+            >
+              <span className="date-day">ALL</span>
+              <span className="date-count">{typeCounts.all} events</span>
+            </button>
+            {dayOptions.map((day) => (
+              <button
+                type="button"
+                key={day.value}
+                className={`date-option${dateFilter.type === "day" && dateFilter.iso === day.value ? " selected" : ""}`}
+                onClick={() => setDateFilter({ type: "day", iso: day.value })}
+              >
+                <span className="date-day">{day.label}</span>
+                <span className="date-num">{day.date}</span>
+                <span className="date-count">{day.events} event{day.events === 1 ? "" : "s"}</span>
               </button>
+            ))}
+            <button type="button" className="date-nav-btn" onClick={() => setWeekOffset((prev) => prev + 1)}>
+              <ChevronRight size={16} />
+            </button>
+            <button
+              type="button"
+              className="date-calendar-btn"
+              onClick={openDatePicker}
+            >
+              <CalendarDays size={14} /> Pick Date
+            </button>
+            <input
+              ref={datePickerRef}
+              type="date"
+              className="date-picker-input"
+              onChange={(event) => setDateFilter({ type: "day", iso: event.target.value })}
+            />
+          </section>
+
+          <section className="filter-bar-v2">
+            <div className="filter-row-v2">
+              <button type="button" className="filter-item">📍 {locationState.locationName || "Los Angeles"} ▾</button>
               <button
                 type="button"
-                className="activity-empty-state__secondary"
-                onClick={() => navigate("/matches/create")}
+                className="filter-item"
+                onClick={() => {
+                  const index = distanceOptions.indexOf(distanceFilter);
+                  const next = distanceOptions[(index + 1) % distanceOptions.length];
+                  setDistanceFilter(next);
+                }}
               >
-                Create New Match
+                📏 {distanceFilter} mi ▾
               </button>
             </div>
-          </div>
-        ) : (
-          <>
-            <div className="activity-feed">
-              {displayedActivities.map((activity) => (
-                <ActivityCard key={activity.id} activity={activity} />
-              ))}
-            </div>
-            {filteredActivities.length > 3 ? (
-              <div className="activity-feed__more">
+            <div className="filter-tabs-v2">
+              {filterOptions.map((option) => (
                 <button
+                  key={option.id}
                   type="button"
-                  className="activity-feed__more-button"
-                  onClick={() => setShowAllActivities((previous) => !previous)}
+                  className={`filter-tab${activeFilter === option.id ? " active" : ""}`}
+                  onClick={() => setActiveFilter(option.id)}
                 >
-                  {showAllActivities
-                    ? "Show Less"
-                    : `Show More${remainingActivityCount > 0 ? ` (${remainingActivityCount})` : ""}`}
+                  {option.label} <span>{typeCounts[option.id]}</span>
                 </button>
-              </div>
-            ) : null}
-          </>
-        )}
-      </section>
+              ))}
+            </div>
+          </section>
 
-      <section className="section" id="schedule">
-        <div className="section-header schedule-header">
-          <div>
-            <h2 className="section-title">My Schedule</h2>
-            <p className="section-subtitle">Your upcoming matches and coaching sessions for the day.</p>
-          </div>
+          <section className="available-section">
+            <div className="available-section__header">
+              <h2>Available Near You</h2>
+              <button type="button" onClick={() => navigate("/matches")}>See All →</button>
+            </div>
+            <div className="activity-list-v2">
+              {filteredActivities.map((activity) => {
+                const meta = activityTypeMeta[activity.type];
+                const startLabel = moment(activity.startTime).calendar(null, {
+                  sameDay: "[Today] · h:mm A",
+                  nextDay: "[Tomorrow] · h:mm A",
+                  nextWeek: "ddd · h:mm A",
+                  sameElse: "ddd · h:mm A",
+                });
+                return (
+                  <article key={activity.id} className="activity-card-v2">
+                    <div className="activity-main-row">
+                      <div className={`activity-type-icon ${meta.typeClass}`}>{meta.icon}</div>
+                      <div className="activity-content">
+                        <div className="activity-top-row">
+                          <span className={`activity-type-label ${meta.typeClass}`}>{meta.label}</span>
+                          {activity.badge ? <span className="activity-badge">{activity.badge}</span> : null}
+                        </div>
+                        <h3>{activity.title}</h3>
+                        <div className="activity-meta-row">
+                          <span><Clock3 size={13} /> {startLabel}</span>
+                          <span><MapPin size={13} /> {activity.venue} · {activity.distance}</span>
+                          <span><Star size={13} /> {activity.level}</span>
+                        </div>
+                      </div>
+                    </div>
+                    <div className="activity-right">
+                      <div className="activity-price">{activity.price}</div>
+                      <div className={`activity-spots${activity.spotsRemaining <= 2 ? " urgent" : ""}`}>
+                        {activity.spotsRemaining} spots left
+                      </div>
+                      <button type="button" className={`activity-btn ${meta.typeClass}`}>{meta.button}</button>
+                    </div>
+                  </article>
+                );
+              })}
+            </div>
+          </section>
         </div>
-        {scheduleState.status === "loading" || scheduleState.status === "idle" ? (
-          <div className="schedule-feedback">Loading your schedule…</div>
-        ) : scheduleState.status === "error" ? (
-          <div className="schedule-feedback schedule-feedback--error">
-            We couldn&rsquo;t load your upcoming lessons. Please try again.
-          </div>
-        ) : scheduleState.status === "unauthenticated" ? (
-          <div className="schedule-feedback">Sign in to view your upcoming lessons.</div>
-        ) : scheduleState.items.length === 0 ? (
-          <div className="schedule-feedback">
-            You don&rsquo;t have any upcoming lessons yet. Book a session to get started!
-          </div>
-        ) : (
-          <div className="schedule-condensed">
-            {scheduleState.items.slice(0, 3).map((item) => (
-              <article key={item.id} className="schedule-condensed__card">
-                <div className="schedule-condensed__time">
-                  <span>{item.timeLabel}</span>
-                  <span>{item.secondaryLabel}</span>
-                </div>
-                <div className="schedule-condensed__details">
-                  <div className="schedule-condensed__title">{item.title}</div>
-                  {item.coachLabel ? <div className="schedule-condensed__meta">{item.coachLabel}</div> : null}
-                  {item.locationLabel ? <div className="schedule-condensed__meta">{item.locationLabel}</div> : null}
-                  {item.durationLabel ? (
-                    <div className="schedule-condensed__meta">⏱ {item.durationLabel}</div>
-                  ) : null}
-                </div>
-                <div className="schedule-condensed__aside">
-                  {item.badgeLabel ? <div className="tag">{item.badgeLabel}</div> : null}
-                  {item.statusLabel ? <div className="status-badge">{item.statusLabel}</div> : null}
-                </div>
-              </article>
-            ))}
-          </div>
-        )}
-      </section>
 
-      <section className="section" id="matches">
-        <div className="section-header">
-          <div>
-            <h2 className="section-title">Matches Near You</h2>
-            <p className="section-subtitle">Join competitive and social matches happening soon.</p>
-          </div>
-          <button
-            type="button"
-            className="section-cta"
-            onClick={() => navigate("/matches/create")}
-          >
-            + Create Match
-          </button>
-        </div>
-        <div className="matches-grid">
-          {matches.map((match) => (
-            <article key={match.title} className="match-card">
-              <div className="match-type">{match.type}</div>
-              <div className="match-title">{match.title}</div>
-              <div className="match-meta">
-                {match.details.map((detail) => (
-                  <span key={detail}>{detail}</span>
-                ))}
-              </div>
-              <button type="button" className="join-btn">
-                Join Match
-              </button>
-            </article>
-          ))}
-        </div>
-      </section>
+        <aside className="home-redesign__sidebar">
+          <section className="sidebar-card-v2">
+            <div className="sidebar-card-v2__header">
+              <h3>My Schedule</h3>
+              <button type="button" onClick={() => navigate("/player/calendar")}>View All →</button>
+            </div>
+            {scheduleState.status === "ready" && scheduleState.items.length > 0 ? (
+              scheduleState.items.map((item) => (
+                <article key={item.id} className="schedule-item-v2">
+                  <span className={`schedule-type ${item.type === "group" ? "group" : "lesson"}`} />
+                  <div>
+                    <p>{item.time}</p>
+                    <h4>{item.type === "lesson" ? `${item.title} ${item.coachLabel ?? ""}` : item.title}</h4>
+                    <span>{item.locationLabel}</span>
+                  </div>
+                </article>
+              ))
+            ) : (
+              <p className="sidebar-empty">No upcoming sessions yet.</p>
+            )}
+          </section>
+
+          <section className="sidebar-card-v2">
+            <h3>Your Stats</h3>
+            <div className="stats-grid">
+              <div><strong>{stats.matches}</strong><span>Matches</span></div>
+              <div><strong>{stats.rating}</strong><span>Rating</span></div>
+              <div><strong>{stats.lessons}</strong><span>Lessons</span></div>
+              <div><strong>{stats.connections}</strong><span>Connect</span></div>
+            </div>
+          </section>
 
-      <section className="section" id="coaches">
-        <div className="section-header">
-          <div>
-            <h2 className="section-title">Featured Coaches</h2>
-            <p className="section-subtitle">Top coaches with stellar reviews from players like you.</p>
-          </div>
-          <button type="button" className="section-cta">
-            View All Coaches
-          </button>
-        </div>
-        <div className="coaches-grid">
-          {coaches.map((coach) => (
-            <article key={coach.name} className="coach-card">
-              <div className="coach-avatar">{coach.name.split(" ").map((part) => part[0]).join("")}</div>
-              <div className="coach-name">{coach.name}</div>
-              <div className="coach-speciality">{coach.speciality}</div>
-              <div className="coach-speciality">{coach.sessions}</div>
-              <div className="rating">⭐ {coach.rating}</div>
-              <button type="button" className="coach-btn">
-                Book Session
-              </button>
-            </article>
-          ))}
-        </div>
-      </section>
+          <section className="sidebar-card-v2 find-players-card">
+            <div className="sidebar-card-v2__header">
+              <h3>Find Players</h3>
+              <button type="button" onClick={() => navigate("/find-players")}>Browse →</button>
+            </div>
+            <p className="find-emoji">🔍</p>
+            <h4>Looking for a hitting partner?</h4>
+            <p>Find players near you.</p>
+            <button type="button" className="find-players-btn" onClick={() => navigate("/find-players")}>Find Players</button>
+          </section>
+        </aside>
+      </div>
 
-      <section className="bottom-actions" id="activity">
-        {bottomActions.map((action) => (
-          <article key={action.title} className="bottom-card" style={{ borderTop: `4px solid ${action.accent}` }}>
-            <h3>{action.title}</h3>
-            <p>{action.description}</p>
-            <button type="button" style={{ background: action.accent }}>
-              {action.action}
-            </button>
-          </article>
-        ))}
-      </section>
-      <QuickBookButton onClick={() => setShowQuickBook(true)} isOpen={showQuickBook} />
-      {showQuickBook ? (
-        <QuickBookModal coaches={quickBookCoaches} onClose={() => setShowQuickBook(false)} />
-      ) : null}
+      <nav className="bottom-nav-mobile" aria-label="Mobile navigation">
+        <NavLink to="/" end className={({ isActive }) => `bottom-nav-mobile__item${isActive ? " active" : ""}`}>
+          <span className="bottom-nav-mobile__icon" aria-hidden="true">🏠</span>
+          Home
+        </NavLink>
+        <NavLink to="/matches" className={({ isActive }) => `bottom-nav-mobile__item${isActive ? " active" : ""}`}>
+          <span className="bottom-nav-mobile__icon" aria-hidden="true">🎾</span>
+          Matches
+        </NavLink>
+        <NavLink to="/find-players" className={({ isActive }) => `bottom-nav-mobile__item${isActive ? " active" : ""}`}>
+          <span className="bottom-nav-mobile__icon" aria-hidden="true">🔍</span>
+          Players
+        </NavLink>
+        <NavLink to="/group-lessons" className={({ isActive }) => `bottom-nav-mobile__item${isActive ? " active" : ""}`}>
+          <span className="bottom-nav-mobile__icon" aria-hidden="true">👥</span>
+          Groups
+        </NavLink>
+        <NavLink to="/find-coaches" className={({ isActive }) => `bottom-nav-mobile__item${isActive ? " active" : ""}`}>
+          <span className="bottom-nav-mobile__icon" aria-hidden="true">🎓</span>
+          Coaches
+        </NavLink>
+      </nav>
     </MainLayout>
   );
 };