diff --git a/public/assets/images/kids-hero.png b/public/assets/images/kids-hero.png
new file mode 100644
index 00000000..c8c629b1
Binary files /dev/null and b/public/assets/images/kids-hero.png differ
diff --git a/public/assets/images/kids-hero1.png b/public/assets/images/kids-hero1.png
new file mode 100644
index 00000000..c254d74e
Binary files /dev/null and b/public/assets/images/kids-hero1.png differ
diff --git a/src/assets/screenshots/light/contact-banner.png b/src/assets/screenshots/light/contact-banner.png
new file mode 100644
index 00000000..52ddf050
Binary files /dev/null and b/src/assets/screenshots/light/contact-banner.png differ
diff --git a/src/assets/styles/card-layout.css b/src/assets/styles/card-layout.css
index 9789fd24..a018dd21 100644
--- a/src/assets/styles/card-layout.css
+++ b/src/assets/styles/card-layout.css
@@ -1,5 +1,7 @@
+/* CARD LAYOUT CSS*/
+
 .card__inner {
-  background: var(--background);
+  background: var(--card-bg, var(--background));
   border: 2px solid var(--border);
   border-radius: 1rem;
   padding: clamp(1rem, 3vw, 1.25rem);
@@ -8,26 +10,48 @@
   flex-direction: column;
   justify-content: space-between;
   gap: clamp(0.75rem, 2vw, 1rem);
-  transition: all 0.2s ease;
+  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
+  -webkit-backdrop-filter: blur(8px);
+  backdrop-filter: blur(8px);
+}
+
+/* ── Card Hover ── */
+.card:hover .card__inner {
+  transform: translateY(-4px);
+  border-color: var(--primary);
+  box-shadow: var(--shadow-glow, 0 0 20px rgba(124, 58, 237, 0.15));
 }
 
+[data-theme="dark"] .card:hover .card__inner {
+  box-shadow: 0 0 24px rgba(244, 114, 182, 0.2);
+}
+
+/* ── Category Icon ── */
 .category__icon {
   font-size: clamp(2rem, 4vw, 2.5rem);
   margin-bottom: clamp(0.25rem, 2vw, 0.5rem);
   line-height: 1;
 }
 
+/* ── Category Title ── */
 .category__title {
-  font-size: clamp(1.25rem, 3vw, 1.5rem);
-  margin-bottom: 0.75rem;
+  font-size: clamp(1.1rem, 3vw, 1.5rem);
+  margin-bottom: 0.5rem;
+  color: var(--heading, var(--text));
+  line-height: 1.3;
+  font-weight: 700;
 }
 
+/* ── Category Description ── */
 .category__description {
-  font-size: clamp(0.9rem, 2vw, 0.95rem);
+  font-size: clamp(0.85rem, 2vw, 0.95rem);
   line-height: 1.6;
   flex-grow: 1;
+  color: var(--subtext, var(--text-light));
 }
 
+/* BUTTONS*/
+
 .btn {
   display: flex;
   align-items: center;
@@ -35,49 +59,150 @@
   padding: clamp(0.5rem, 2vw, 0.75rem) clamp(0.75rem, 2vw, 2rem);
   border-radius: 0.75rem;
   font-weight: 600;
-  font-size: clamp(0.9rem, 2vw, 1.1rem);
-  transition: all 0.2s ease;
+  font-size: clamp(0.85rem, 2vw, 1rem);
+  transition: transform 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
   text-decoration: none;
   flex: 1;
-  min-width: 119px;
+  min-width: 100px;
+  min-height: 44px;
+  /* touch friendly */
+  border: none;
+  cursor: pointer;
+  white-space: nowrap;
 }
 
-.card__actions {
-  display: flex;
-  margin-top: auto;
-  gap: 4px;
+.btn:hover {
+  transform: translateY(-2px);
 }
 
-@media (max-width: 768px) {
-  .btn {
-    width: 100%;
-  }
+.btn:active {
+  transform: translateY(0);
 }
 
+/* Playground Button */
 .btn-playground {
   background: var(--primary);
-  color: var(--background);
+  color: #fff;
 }
 
-.card:hover .card__inner {
-  transform: translateY(-3px);
-  border-color: var(--primary);
+.btn-playground:hover {
+  background: var(--primary-light);
+  box-shadow: 0 4px 12px rgba(124, 58, 237, 0.3);
 }
 
-.btn:hover {
-  transform: translateY(-2px);
+[data-theme="dark"] .btn-playground:hover {
+  box-shadow: 0 4px 12px rgba(244, 114, 182, 0.3);
 }
 
-.btn-playground:hover {
+/* Board Button */
+.btn-board {
+  background: var(--primary);
+  color: #fff;
+}
+
+.btn-board:hover {
   background: var(--primary-light);
+  box-shadow: 0 4px 12px rgba(124, 58, 237, 0.3);
+}
+
+/* ── Card Actions Row ── */
+.card__actions {
+  display: flex;
+  margin-top: auto;
+  gap: 6px;
+  flex-wrap: wrap;
 }
 
+/* ── Card Icon ── */
 .card_icon {
-  font-size: 1.2em;
-  margin-right: 0.5em;
+  font-size: 1.1em;
+  margin-right: 0.4em;
+  flex-shrink: 0;
 }
 
-.btn-board {
-  background: var(--primary);
-  color: var(--background);
+/* TABLET — 1024px*/
+@media (max-width: 1024px) {
+  .card__inner {
+    padding: 1rem;
+    gap: 0.75rem;
+  }
+
+  .btn {
+    min-width: 90px;
+    font-size: 0.88rem;
+  }
 }
+
+/*MOBILE — 768px*/
+@media (max-width: 768px) {
+  .card__inner {
+    padding: 0.875rem;
+    border-radius: 0.75rem;
+    gap: 0.6rem;
+  }
+
+  /* Disable hover lift on touch */
+  .card:hover .card__inner {
+    transform: none;
+  }
+
+  .card:active .card__inner {
+    transform: scale(0.98);
+    border-color: var(--primary);
+  }
+
+  .category__title {
+    font-size: 1.05rem;
+    margin-bottom: 0.35rem;
+  }
+
+  .category__description {
+    font-size: 0.85rem;
+  }
+
+  /* Buttons full width on mobile */
+  .card__actions {
+    flex-direction: column;
+    gap: 6px;
+  }
+
+  .btn {
+    width: 100%;
+    flex: none;
+    min-width: unset;
+    padding: 0.65rem 1rem;
+    font-size: 0.9rem;
+    justify-content: center;
+  }
+
+  .btn:hover {
+    transform: none;
+  }
+
+  .btn:active {
+    transform: scale(0.98);
+  }
+}
+
+/* SMALL MOBILE — 480px*/
+@media (max-width: 480px) {
+  .card__inner {
+    padding: 0.75rem;
+    gap: 0.5rem;
+    border-radius: 0.65rem;
+  }
+
+  .category__icon {
+    font-size: 1.75rem;
+  }
+
+  .category__title {
+    font-size: 1rem;
+  }
+
+  .btn {
+    padding: 0.6rem 0.75rem;
+    font-size: 0.85rem;
+    border-radius: 0.6rem;
+  }
+}
\ No newline at end of file
diff --git a/src/assets/styles/common.css b/src/assets/styles/common.css
index 2aac239b..a630218d 100644
--- a/src/assets/styles/common.css
+++ b/src/assets/styles/common.css
@@ -1,3 +1,8 @@
+/* ══════════════════════════════════════
+   COMMON.CSS — Utilities & Debug Tools
+══════════════════════════════════════ */
+
+/* ── Debug TV Container (dev only) ── */
 .tv {
   container-type: inline-size;
   container-name: main;
@@ -11,6 +16,7 @@
   outline-offset: 0.5rem;
 }
 
+/* ── Debug Border Helpers ── */
 .rdb {
   border: 1px solid red;
 }
@@ -19,8 +25,11 @@
   outline: 1px solid red;
 }
 
+/* ══════════════════════════════════════
+   ACCESSIBILITY
+══════════════════════════════════════ */
 
-/* Utilities */
+/* Screen reader only — visually hidden */
 .sr-only {
   position: absolute;
   width: 1px;
@@ -33,13 +42,14 @@
   border-width: 0;
 }
 
-.link__active,
-.text__active {
-  color: hsl(from blue 80 10 10);
-}
+/* ══════════════════════════════════════
+   LAYOUT UTILITIES
+══════════════════════════════════════ */
 
 .content {
   min-height: 100vh;
+  min-height: 100dvh;
+  /* dynamic viewport on mobile */
 }
 
 .layout {
@@ -47,27 +57,232 @@
   max-height: 100dvh;
 }
 
+/* ══════════════════════════════════════
+   TEXT UTILITIES
+══════════════════════════════════════ */
+
 .txt__center {
   text-align: center;
 }
 
+/* FIX: hsl(from ...) is experimental — replaced with plain color */
+.link__active,
+.text__active {
+  color: var(--primary, #4361ee);
+}
+
+/* FIX: text-wrap-style: balance is non-standard — use text-wrap: balance */
+.text__balance {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  overflow-wrap: break-word;
+  word-break: break-word;
+}
+
+/* Text truncate — single line */
+.text__truncate {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  max-width: 100%;
+}
+
+/* ══════════════════════════════════════
+   VISIBILITY UTILITIES
+══════════════════════════════════════ */
+
+/* FIX: content-visibility: hidden hides from accessibility tree too
+   Use display:none or visibility:hidden instead */
 .hide {
-  content-visibility: hidden;
+  display: none;
+}
+
+/* Visually hide but keep in layout */
+.invisible {
+  visibility: hidden;
+  pointer-events: none;
 }
 
-::disabled {
+/* ══════════════════════════════════════
+   INTERACTION UTILITIES
+══════════════════════════════════════ */
+
+/* FIX: ::disabled is not valid — :disabled is for form elements only
+   Use .disabled class instead */
+.disabled,
+[disabled],
+[aria-disabled="true"] {
   pointer-events: none;
+  opacity: 0.5;
+  cursor: not-allowed;
 }
 
 .no__link {
   text-decoration: none;
+  color: inherit;
 }
 
-.text__balance {
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  text-size-adjust: auto;
-  text-shadow: #fc0 1px 0 10px;
-  text-wrap-style: balance;
+/* ══════════════════════════════════════
+   FLEX / GRID SHORTCUTS
+══════════════════════════════════════ */
+
+.flex {
+  display: flex;
+}
+
+.flex__center {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.flex__col {
+  display: flex;
+  flex-direction: column;
+}
+
+.flex__wrap {
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.gap__sm {
+  gap: 0.5rem;
+}
+
+.gap__md {
+  gap: 1rem;
+}
+
+.gap__lg {
+  gap: 1.5rem;
+}
+
+.grid__2 {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: 1rem;
+}
+
+.grid__3 {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 1rem;
+}
+
+.grid__4 {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  gap: 1rem;
+}
+
+/* ══════════════════════════════════════
+   SPACING UTILITIES
+══════════════════════════════════════ */
+
+.mt__sm {
+  margin-top: 0.5rem;
+}
+
+.mt__md {
+  margin-top: 1rem;
+}
+
+.mt__lg {
+  margin-top: 2rem;
+}
+
+.mb__sm {
+  margin-bottom: 0.5rem;
+}
+
+.mb__md {
+  margin-bottom: 1rem;
+}
+
+.mb__lg {
+  margin-bottom: 2rem;
+}
+
+.p__sm {
+  padding: 0.5rem;
+}
+
+.p__md {
+  padding: 1rem;
+}
+
+.p__lg {
+  padding: 2rem;
+}
+
+/* ══════════════════════════════════════
+   CARD UTILITY
+══════════════════════════════════════ */
+
+.card__base {
+  background: var(--card-bg, var(--bg-card, #fff));
+  border: 1px solid var(--border, #dee2e6);
+  border-radius: var(--border-radius, 12px);
+  padding: 1.25rem;
+  box-shadow: var(--shadow-sm, 0 1px 3px rgba(0, 0, 0, 0.1));
+  transition: box-shadow 0.3s ease, transform 0.2s ease, border-color 0.3s ease;
+  -webkit-backdrop-filter: blur(8px);
+  backdrop-filter: blur(8px);
+}
+
+.card__base:hover {
+  box-shadow: var(--shadow-glow, 0 0 20px rgba(124, 58, 237, 0.15));
+  transform: translateY(-2px);
+  border-color: var(--primary, #4361ee);
+}
+
+/* ══════════════════════════════════════
+   MOBILE RESPONSIVE UTILITIES
+══════════════════════════════════════ */
+
+/* Hide/show by breakpoint */
+.hide__mobile {
+  display: block;
+}
+
+.show__mobile {
+  display: none;
+}
+
+.hide__desktop {
+  display: none;
+}
+
+@media (max-width: 768px) {
+  .hide__mobile {
+    display: none !important;
+  }
+
+  .show__mobile {
+    display: block !important;
+  }
+
+  .hide__desktop {
+    display: block !important;
+  }
+
+  /* Grid stacks on mobile */
+  .grid__2,
+  .grid__3,
+  .grid__4 {
+    grid-template-columns: 1fr;
+  }
+
+  /* TV debug container — smaller margin on mobile */
+  .tv {
+    margin-inline: 0.5rem;
+  }
+}
+
+@media (max-width: 480px) {
+  .grid__2 {
+    grid-template-columns: 1fr;
+  }
 }
\ No newline at end of file
diff --git a/src/assets/styles/footer.css b/src/assets/styles/footer.css
index 272a1182..3b011550 100644
--- a/src/assets/styles/footer.css
+++ b/src/assets/styles/footer.css
@@ -1,294 +1,314 @@
 :root {
-  --footer-bg: #1f2937;
-  --footer-text-main: #d1d5db;
-  --footer-text-secondary: #9ca3af;
+  --footer-text: #d1d5db;
+  --footer-text-sub: #9ca3af;
   --footer-text-hover: #9ee0e7;
-  --footer-brand-text: #ffffff;
-  --footer-brand-highlight: #2ed729;
-  --footer-social-hover: #0ea5e9;
-  --footer-copyright-link: #9ca3af;
-  --footer-copyright-link-hover: #0ea5e9;
-  --footer-border-color: #374151;
+  --footer-brand: #ffffff;
+  --footer-highlight: #2ed729;
+  --footer-link: #9ca3af;
+  --footer-link-hover: #0ea5e9;
+  --footer-border: #374151;
 }
 
 [data-theme="dark"] {
-  --footer-bg: #1f2937;
-  --footer-text-main: #d1d5db;
-  --footer-text-secondary: #9ca3af;
-  --footer-text-hover: #9ee0e7;
-  --footer-brand-text: #ffffff;
-  --footer-brand-highlight: #fbbf24;
-  --footer-social-hover: #0ea5e9;
-  --footer-copyright-link: #9ca3af;
-  --footer-copyright-link-hover: #0ea5e9;
-  --footer-border-color: #374151;
+  --footer-text: #dff7ff;
+  --footer-text-sub: #7dd3fc;
+  --footer-text-hover: #67e8f9;
+  --footer-brand: #f0fdff;
+  --footer-highlight: #22d3ee;
+  --footer-link: #7dd3fc;
+  --footer-link-hover: #67e8f9;
+  --footer-border: rgba(34, 211, 238, 0.14);
 }
 
 [data-theme="light"] {
-  --footer-bg: #bbb;
-  --footer-text-main: #22223b;
-  --footer-text-secondary: #560072;
-  --footer-text-hover: #eb5d9d;
-  --footer-brand-text: #0f0f10;
-  --footer-brand-highlight: #c13595;
-  --footer-social-hover: #0ea5e9;
-  --footer-copyright-link: #58250b;
-  --footer-copyright-link-hover: #178bb9;
-  --footer-border-color: #e5e7eb;
+  --footer-text: #334155;
+  --footer-text-sub: #64748b;
+  --footer-text-hover: #7c3aed;
+  --footer-brand: #0f172a;
+  --footer-highlight: #7c3aed;
+  --footer-link: #64748b;
+  --footer-link-hover: #7c3aed;
+  --footer-border: #e2e8f0;
 }
 
-.footer-theme-toggle {
-  display: inline-flex;
+.container__footer {
+  background: transparent;
+  border-top: 1px solid rgba(34, 211, 238, 0.08);
+  padding: 1.5rem 2rem 0;
+  margin-top: -2rem;
+  color: var(--footer-text);
+  font-size: 0.95rem;
+  position: relative;
+  z-index: 1;
+  width: 100%;
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
   align-items: center;
-  gap: 0.75rem;
-  margin-top: 1.5rem;
-  padding: 0.5rem 1rem;
-  background-color: var(--bg-tertiary);
-  color: var(--primary);
-  border: 1px solid var(--primary);
-  border-radius: 8px;
-  cursor: pointer;
-  font-size: 0.9rem;
-  font-weight: 500;
-  transition: all 0.2s ease;
-}
-
-.footer-theme-toggle:hover {
-  background-color: var(--bg-secondary);
-  border-color: var(--primary);
-  color: white;
-}
-
-[data-theme="system"] .footer-theme-toggle use[href="#icon-system"],
-[data-theme="light"] .footer-theme-toggle use[href="#icon-sun"],
-[data-theme="dark"] .footer-theme-toggle use[href="#icon-moon"] {
-  display: block;
-}
-
-.footer-theme-toggle svg symbol {
-  display: none;
-  transition: transform 0.3s ease;
 }
 
-.footer-theme-toggle use {
-  display: none;
-}
-
-[data-theme="system"] .footer-theme-toggle svg symbol[id="icon-system"],
-[data-theme="light"] .footer-theme-toggle svg symbol[id="icon-sun"],
-[data-theme="dark"] .footer-theme-toggle svg symbol[id="icon-moon"] {
-  display: block;
-}
-
-/* Footer background and layout */
-.container__footer {
-  background: var(--footer-bg);
-  padding: 2.5rem 2rem 1.5rem 2rem;
-  color: var(--footer-text-main);
-  font-size: 1rem;
-  border-top: 1px solid var(--footer-border-color);
+.footer__inner {
+  width: 100%;
+  max-width: 1100px;
 }
 
 .footer__main-content {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 2rem;
-  max-width: 1100px;
-  margin: 0 auto;
+  display: grid;
+  grid-template-columns: 240px 1fr;
+  gap: 3rem;
   width: 100%;
+  padding-bottom: 2rem;
+  align-items: flex-start;
 }
 
-.footer__brand-section {
-  flex: 1 1 220px;
-  min-width: 220px;
+.footer__nav {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 2rem;
 }
 
-.footer__nav {
+.footer__brand-section {
   display: flex;
-
-  flex-wrap: wrap;
-  justify-content: space-between;
-  gap: 2rem;
-  flex: 3 1 600px;
+  flex-direction: column;
+  gap: 0.75rem;
 }
 
 .brand {
-  font-size: 2rem;
-  font-weight: 700;
-  color: var(--footer-brand-text);
-  margin-bottom: 0.5rem;
+  font-size: 1.75rem;
+  font-weight: 800;
+  color: var(--footer-brand);
+  line-height: 1;
+  letter-spacing: -0.5px;
 }
 
 .brand .kbd {
-  color: var(--footer-brand-highlight);
-}
-
-.container__footer p {
-  margin: 0.5rem 0 1.5rem 0;
-  color: var(--footer-text-main);
-  font-size: 1.2rem;
-  max-width: 260px;
+  color: var(--footer-highlight);
 }
 
-.social {
-  display: flex;
-  gap: 1.2rem;
+.footer__tagline {
+  color: var(--footer-text-sub);
+  font-size: 0.88rem;
+  line-height: 1.6;
+  max-width: 220px;
 }
 
-.social a {
-  color: var(--footer-text-main);
-  font-size: 1.5rem;
-  transition: color 0.2s;
+.footer__badge {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.4rem;
+  background: rgba(34, 211, 238, 0.08);
+  border: 1px solid var(--footer-border);
+  border-radius: 20px;
+  padding: 0.3rem 0.8rem;
+  font-size: 0.78rem;
+  font-weight: 600;
+  color: var(--footer-highlight);
+  width: fit-content;
+  margin-top: 0.25rem;
 }
 
-.social a:hover {
-  color: var(--footer-social-hover);
+[data-theme="light"] .footer__badge {
+  background: rgba(124, 58, 237, 0.08);
+  color: var(--footer-highlight);
 }
 
 .footer__nav--item {
-  flex: 1;
-  min-width: 150px;
+  display: flex;
+  flex-direction: column;
+  gap: 0;
 }
 
+/* Button reset + title styles */
 .footer__nav--title {
+  all: unset;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
   font-weight: 700;
-  font-size: 1.8rem;
+  font-size: 0.78rem;
+  color: var(--footer-brand);
+  text-transform: uppercase;
+  letter-spacing: 1.5px;
   margin-bottom: 1rem;
-  color: var(--footer-brand-text);
-  list-style: none;
-  pointer-events: none;
+  width: 100%;
+  box-sizing: border-box;
+  -webkit-tap-highlight-color: transparent;
+  user-select: none;
 }
 
-.footer__nav--title::-webkit-details-marker {
+.footer__nav--title .chevron {
   display: none;
+  font-size: 0.75rem;
+  transition: transform 0.25s ease;
+  color: var(--footer-text-sub);
 }
 
-.footer__nav--title .fa-chevron-down {
-  display: none;
+.footer__nav--title[aria-expanded="true"] .chevron {
+  transform: rotate(180deg);
 }
 
 .footer__nav--links {
   display: flex;
   flex-direction: column;
-  gap: 0.75rem;
+  gap: 0.6rem;
 }
 
-@media (min-width: 768px) {
-  .footer__nav {
-    flex-direction: row;
-  }
-}
-
-/* Dark mode styles */
-@media (prefers-color-scheme: dark) {
-  .footer__nav {
-    color: #6b7280;
-  }
+.footer__nav--links a {
+  color: var(--footer-text-sub);
+  text-decoration: none;
+  font-size: 0.9rem;
+  line-height: 1.4;
+  transition: color 0.2s ease, padding-left 0.2s ease;
+  display: flex;
+  align-items: center;
+  gap: 0.4rem;
 }
 
-.footer__nav--item {
-  text-decoration: underline;
-  text-underline-offset: 24x;
-  transition: color 0.2s;
+.footer__nav--links a:hover {
+  color: var(--footer-text-hover);
+  padding-left: 4px;
 }
 
-.footer__nav--item:hover {
-  color: #3b82f6;
+.footer__nav--links a::before {
+  content: '';
+  width: 4px;
+  height: 4px;
+  border-radius: 50%;
+  background: var(--footer-highlight);
+  flex-shrink: 0;
+  opacity: 0;
+  transition: opacity 0.2s ease;
 }
 
-@media (prefers-color-scheme: dark) {
-  .footer__nav--item:hover {
-    color: #60a5fa;
-  }
+.footer__nav--links a:hover::before {
+  opacity: 1;
 }
 
-.footer__nav--links a {
-  color: var(--footer-text-secondary);
-  text-decoration: none;
-  font-size: 1.2rem;
-  transition: color 0.2s;
+.copyright {
+  width: 100%;
+  padding: 1.25rem 0;
+  border-top: 1px solid rgba(34, 211, 238, 0.1);
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  flex-wrap: wrap;
+  gap: 0.75rem;
+  font-size: 0.82rem;
+  color: var(--footer-text-sub);
 }
 
-.footer__nav--links a:hover {
-  color: var(--footer-text-hover);
-  text-decoration: underline;
+.copyright__text {
+  flex-shrink: 0;
 }
 
-.copyright {
-  text-align: center;
-  color: var(--footer-text-main);
-  font-size: 0.95rem;
-  margin-top: 2rem;
-  border-top: 1px solid var(--footer-border-color);
-  padding-top: 1.5rem;
+.copyright__links {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  flex-wrap: wrap;
 }
 
-.copyright a {
-  color: var(--footer-copyright-link);
+.copyright__links a {
+  color: var(--footer-link);
   text-decoration: none;
-  margin: 0 0.5rem;
+  transition: color 0.2s;
+  white-space: nowrap;
 }
 
-.copyright a:hover {
+.copyright__links a:hover {
+  color: var(--footer-link-hover);
   text-decoration: underline;
-  color: var(--footer-copyright-link-hover);
 }
 
-/* --- Mobile Accordion Styles --- */
+.sep {
+  color: var(--footer-border);
+  user-select: none;
+}
+
+/* ══ MOBILE ══ */
 @media (max-width: 768px) {
+  .container__footer {
+    padding: 2.5rem 1.2rem 1rem;
+  }
+
   .footer__main-content {
-    flex-direction: column;
+    grid-template-columns: 1fr;
+    gap: 1.5rem;
+    text-align: center;
+  }
+
+  .footer__brand-section {
+    align-items: center;
+  }
+
+  .footer__tagline {
+    max-width: 260px;
+    font-size: 0.9rem;
+    line-height: 1.7;
   }
 
   .footer__nav {
+    display: flex;
     flex-direction: column;
-    width: 100%;
     gap: 0;
-    flex: initial;
+    width: 100%;
   }
 
   .footer__nav--item {
     width: 100%;
-    border-bottom: 1px solid var(--footer-border-color);
-    flex: initial;
-  }
-
-  .footer__nav--item:first-of-type {
-    border-top: 1px solid var(--footer-border-color);
+    border-bottom: 1px solid rgba(148, 163, 184, 0.15);
   }
 
   .footer__nav--title {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    padding: 1.2rem 0;
-    cursor: pointer;
-    font-size: 1.1rem;
-    font-weight: 600;
+    padding: 1rem 0.25rem;
     margin-bottom: 0;
-    pointer-events: auto;
-  }
-
-  .footer__nav--title .fa-chevron-down {
-    display: inline-block;
-    transition: transform 0.2s ease-in-out;
+    font-size: 0.85rem;
+    cursor: pointer;
   }
 
-  .footer__nav--item[open]>summary .fa-chevron-down {
-    transform: rotate(180deg);
+  .footer__nav--title .chevron {
+    display: block;
   }
 
+  /* Links hidden on mobile by default — JS sets display:flex */
   .footer__nav--links {
-    padding: 0 0 1.2rem 1rem;
-    gap: 1rem;
+    align-items: center;
+    padding: 0.5rem 0 1rem;
+    gap: 0.85rem;
   }
 
   .footer__nav--links a {
-    font-size: 1rem;
+    font-size: 0.95rem;
+    min-height: 44px;
+    justify-content: center;
+  }
+
+  .footer__nav--links a::before {
+    display: none;
   }
 
   .copyright {
-    margin-top: 1rem;
+    flex-direction: column;
+    align-items: center;
+    text-align: center;
+    gap: 0.75rem;
+    padding-top: 1.5rem;
+    padding-bottom: 1rem;
+  }
+
+  .copyright__links {
+    justify-content: center;
+    gap: 0.75rem;
+  }
+
+  .copyright__links a {
     font-size: 0.85rem;
+    min-height: 44px;
+    display: inline-flex;
+    align-items: center;
+  }
+
+  .sep {
+    display: none;
   }
 }
\ No newline at end of file
diff --git a/src/assets/styles/globals.css b/src/assets/styles/globals.css
index 749715f4..a2deb1e3 100644
--- a/src/assets/styles/globals.css
+++ b/src/assets/styles/globals.css
@@ -1,11 +1,34 @@
 @import "./custom-fonts.css";
-
 @import "./common.css";
 
+/* ══ THEME GRADIENT — outside @layer ══ */
+html {
+  background-color: #0f172a;
+  background-image: none;
+  background-attachment: fixed;
+  background-size: cover;
+  min-height: 100%;
+}
+
+html[data-theme="dark"] {
+  background-color: #020608;
+  background-image: linear-gradient(180deg, #020608 0%, #031a20 50%, #052e38 100%);
+}
+
+html[data-theme="light"] {
+  background-color: #ffffff;
+  background-image: none;
+}
+
+body {
+  background-color: transparent !important;
+  background-image: none !important;
+}
+
 @layer base {
   :root {
-    --primary: #3b82f6;
-    --primary-light: #60a5fa;
+    --primary: #7c3aed;
+    --primary-light: #a78bfa;
     --secondary: #94a3b8;
     --background: #0f172a;
     --text: #f1f5f9;
@@ -15,27 +38,82 @@
     --header-h: 4rem;
     --footer-h: 4rem;
     --sidebar-w: 16rem;
-    --transition: all 0.3s ease;
+    --transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
   }
 
+  /* ══════════════════════════════════
+     DARK MODE — Ocean Midnight
+     #020608 → #031a20 → #052e38
+  ══════════════════════════════════ */
   [data-theme="dark"] {
-    --primary: #3b82f6;
-    --primary-light: #60a5fa;
-    --secondary: #94a3b8;
-    --background: #0f172a;
-    --text: #f1f5f9;
-    --border: #1e293b;
-    --card-bg: rgba(37, 53, 79, 0.8);
+    --primary: #22d3ee;
+    --primary-light: #67e8f9;
+    --secondary: #0891b2;
+    --background: #020608;
+    --bg-gradient: linear-gradient(180deg, #020608 0%, #031a20 50%, #052e38 100%);
+    --text: #e0f7fa;
+    --border: #063540;
+    --card-bg: rgba(5, 46, 56, 0.7);
+
+    --surface-1: #031a20;
+    --surface-2: #052e38;
+    --surface-3: #063540;
+    --accent: #22d3ee;
+    --accent-glow: rgba(34, 211, 238, 0.15);
+    --success: #34d399;
+    --warning: #fbbf24;
+    --danger: #f87171;
+    --muted: #4a9ea8;
+    --heading: #e0f7fa;
+    --subtext: #7dd3fc;
+
+    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.4);
+    --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.5);
+    --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.6);
+    --shadow-glow: 0 0 20px rgba(34, 211, 238, 0.2);
+
+    --select-bg: #031a20;
+    --select-border: rgba(34, 211, 238, 0.3);
+    --select-text: #e0f7fa;
+    --select-option-odd: rgba(5, 46, 56, 0.6);
+    --select-hover: rgba(34, 211, 238, 0.2);
   }
 
+  /* ══════════════════════════════════
+     LIGHT MODE
+  ══════════════════════════════════ */
   [data-theme="light"] {
-    --primary: #ba1db8;
-    --primary-light: #c975c6;
+    --primary: #7c3aed;
+    --primary-light: #a78bfa;
     --secondary: #64748b;
     --background: #ffffff;
+    --bg-gradient: none;
     --text: #0f172a;
     --border: #e2e8f0;
-    --card-bg: rgba(255, 255, 255, 0.8);
+    --card-bg: rgba(255, 255, 255, 0.95);
+
+    --surface-1: #ffffff;
+    --surface-2: #f8fafc;
+    --surface-3: #f1f5f9;
+    --accent: #7c3aed;
+    --accent-glow: rgba(124, 58, 237, 0.1);
+    --success: #16a34a;
+    --warning: #d97706;
+    --danger: #dc2626;
+    --muted: #94a3b8;
+    --heading: #0f172a;
+    --subtext: #64748b;
+
+    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08);
+    --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.1);
+    --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.15);
+    --shadow-glow: 0 0 20px rgba(124, 58, 237, 0.15);
+
+    --select-bg: #ffffff;
+    --select-border: rgba(125, 211, 252, 0.5);
+    --select-text: #0f172a;
+    --select-option-odd: rgba(183, 196, 220, 0.3);
+    --select-hover: rgba(29, 78, 216, 0.15);
   }
 
   html {
@@ -61,40 +139,62 @@
     box-sizing: border-box;
   }
 
+  *,
+  *::before,
+  *::after {
+    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
+  }
+
+  /* ── Body — gradient background ── */
+  /* html gets gradient — always visible under everything */
+  html {
+    background-color: var(--background) !important;
+    background-image: var(--bg-gradient, none) !important;
+    background-attachment: fixed !important;
+    background-size: cover !important;
+  }
+
   body {
     container-type: inline-size;
     container-name: thread;
     box-sizing: border-box;
     line-height: 1.6;
     min-height: 100vh;
-    font-family: "Roboto", 'Segoe UI',
-      system-ui,
-      -apple-system,
-      sans-serif,
-      system-ui;
+    font-family: "Roboto", 'Segoe UI', system-ui, -apple-system, sans-serif;
     font-size: 16px;
-    background-color: var(--background);
+    background: transparent;
+    color: var(--text);
     transition: var(--transition);
   }
 
+  /* ── Wave overlay ── */
   body::before {
-    --size: 45px;
-    --line: color-mix(in lch, canvasText, transparent 70%);
     content: "";
     height: 100vh;
     width: 100vw;
     position: fixed;
-    background:
-      linear-gradient(90deg, var(--line) 1px, transparent 1px var(--size)) 50% 50% / var(--size) var(--size),
-      linear-gradient(var(--line) 1px, transparent 1px var(--size)) 50% 50% / var(--size) var(--size);
-    mask: linear-gradient(150deg, transparent 50%, white);
     top: 0;
-    transform-style: flat;
+    left: 0;
     pointer-events: none;
+    z-index: 0;
+    background-image:
+      repeating-linear-gradient(60deg,
+        transparent,
+        transparent 28px,
+        rgba(34, 211, 238, 0.03) 28px,
+        rgba(34, 211, 238, 0.03) 29px),
+      repeating-linear-gradient(-40deg,
+        transparent,
+        transparent 34px,
+        rgba(34, 211, 238, 0.02) 34px,
+        rgba(34, 211, 238, 0.02) 35px);
   }
 
-  :where(.x-link):is(:hover, :focus-visible) {
-    opacity: 1;
+  [data-theme="light"] body::before {
+    background-image:
+      linear-gradient(90deg, rgba(0, 0, 0, 0.04) 1px, transparent 1px),
+      linear-gradient(rgba(0, 0, 0, 0.04) 1px, transparent 1px);
+    background-size: 45px 45px;
   }
 
   .container {
@@ -102,15 +202,22 @@
     grid-template-columns: var(--sidebar-w) 1fr;
     grid-template-rows: var(--header-h) 1fr var(--footer-h);
     min-height: 100vh;
-    width: var(--container-width);
+    width: var(--container-width, min(1200px, 95%));
     margin: 0 auto;
     padding: 0 1rem;
   }
 
   a {
-    color: light-dark(#151414, white);
+    color: var(--primary);
+    text-decoration: none;
+    transition: color 0.2s ease, opacity 0.2s ease;
   }
 
+  a:hover,
+  a:focus-visible {
+    color: var(--primary-light);
+    opacity: 0.9;
+  }
 
   h1 {
     font-size: 3rem;
@@ -118,6 +225,7 @@
     line-height: 1;
     text-align: center;
     font-family: Roboto;
+    color: var(--heading, var(--text));
   }
 
   main {
@@ -127,7 +235,7 @@
     grid-auto-flow: column;
     grid-template-areas: "sidebar content";
     padding: 1rem;
-    background-color: color-mix(in srgb, var(--background) 97%, var(--text) 3%);
+    background-color: transparent;
     font-size: 1.25rem;
     line-height: 1.6;
 
@@ -171,82 +279,244 @@
   mark {
     margin-inline: 0.5rem;
     padding-inline: 0.5rem;
+    background-color: var(--warning);
+    color: #1a1a1a;
+    border-radius: 3px;
   }
 
+  /* ── Select ── */
   select {
     width: 100%;
-    padding: 0.7rem 1.39rem 0.7rem 0.89rem;
-    font-size: 1.3rem;
+    padding: 0.7rem 1.4rem 0.7rem 0.9rem;
+    font-size: 1.1rem;
     text-transform: capitalize;
     font-variant: small-caps;
     letter-spacing: 2px;
-    border: 2px solid rgba(125, 211, 252, 0.3);
+    border: 2px solid var(--select-border, rgba(125, 211, 252, 0.3));
     border-radius: 0.75rem;
-    color: light-dark(black, white);
+    background-color: var(--select-bg, var(--surface-2));
+    color: var(--select-text, var(--text));
     cursor: pointer;
-    appearance: base-select;
-    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-    box-shadow:
-      0 4px 6px -1px rgba(0, 0, 0, 0.1),
-      0 2px 4px -1px rgba(0, 0, 0, 0.06);
+    -webkit-appearance: none;
+    appearance: none;
+    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%2322d3ee' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
+    background-repeat: no-repeat;
+    background-position: right 0.9rem center;
+    transition: border-color 0.3s ease, transform 0.2s ease, box-shadow 0.3s ease;
+    box-shadow: var(--shadow-sm);
+  }
+
+  select:hover {
+    border-color: var(--primary);
+    transform: translateY(-1px);
+    box-shadow: var(--shadow-md);
+  }
+
+  select:focus {
+    outline: none;
+    border-color: var(--primary);
+    box-shadow: 0 0 0 3px var(--accent-glow, rgba(34, 211, 238, 0.2));
+  }
+
+  select option {
+    padding: 0.5rem 0.75rem;
+    font-variant: small-caps;
+    text-transform: capitalize;
+    letter-spacing: 2px;
+    background-color: var(--select-bg, var(--surface-2));
+    color: var(--select-text, var(--text));
+  }
+
+  select option:nth-of-type(odd) {
+    background-color: var(--select-option-odd, rgba(183, 196, 220, 0.3));
+  }
+
+  *:focus {
+    outline: none;
+    box-shadow: none;
+  }
+
+  *:focus-visible {
+    outline: 2px solid var(--primary);
+    outline-offset: 2px;
+    box-shadow: none;
+  }
 
-    &::picker-icon {
-      color: #806df9;
-      transition: 0.4s rotate;
+  /* ══════════════════════════════════════════
+     MOBILE RESPONSIVE
+  ══════════════════════════════════════════ */
+  html,
+  body {
+    overflow-x: hidden;
+    max-width: 100vw;
+  }
+
+  img,
+  picture,
+  video,
+  canvas,
+  svg {
+    max-width: 100%;
+    height: auto;
+    display: block;
+  }
+
+  @media (max-width: 1024px) {
+    :root {
+      --sidebar-w: 12rem;
     }
 
-    &:open::picker-icon {
-      rotate: 180deg;
+    .container {
+      grid-template-columns: var(--sidebar-w) 1fr;
+      width: 100%;
+      padding: 0 0.75rem;
     }
 
-    &:hover {
-      border-color: #7dd3fc;
-      transform: translateY(-1px);
-      box-shadow:
-        0 10px 15px -3px rgba(0, 0, 0, 0.1),
-        0 4px 6px -2px rgba(0, 0, 0, 0.05);
+    main {
+      font-size: 1.1rem;
+      padding: 0.75rem;
     }
 
-    &:focus {
-      outline: none;
-      border-color: #2dd4bf;
-      box-shadow: 0 0 0 3px rgba(45, 212, 191, 0.3);
+    h1 {
+      font-size: 2.25rem;
     }
+  }
 
-    & option {
-      padding: 0.5rem 1.25rem 0.5rem 0.75rem;
-      font-variant: small-caps;
-      text-transform: capitalize;
-      letter-spacing: 2px;
-      background: light-dark(white, #1e293b);
-      color: light-dark(black, white);
-      border-bottom: 1px solid rgba(125, 211, 252, 0.1);
+  @media (max-width: 768px) {
+    :root {
+      --header-h: 4rem;
+      --footer-h: auto;
+      --sidebar-w: 0px;
+    }
 
-      &:nth-of-type(odd) {
-        background-color: #b7c4dc80;
-      }
+    html {
+      font-size: clamp(13px, 4vw, 15px);
+    }
 
-      &:hover {
-        background-color: rgba(29, 78, 216, 0.5);
-        font-weight: 600;
-      }
+    .container {
+      display: flex;
+      flex-direction: column;
+      width: 100%;
+      padding: 0;
+      margin: 0;
+    }
 
-      &::checkmark {
-        order: 1;
-        margin-left: auto;
-        content: "✔";
-        color: #806df9;
-      }
+    main {
+      display: flex;
+      flex-direction: column;
+      padding: 0.75rem;
+      font-size: 1rem;
+      gap: 0.75rem;
+      height: auto;
+      overflow: visible;
+    }
+
+    .sidebar,
+    aside,
+    [class*="sidebar"] {
+      display: none !important;
+    }
+
+    .content,
+    [class*="content"] {
+      grid-column: 1 / -1;
+      height: auto;
+      width: 100%;
+    }
+
+    h1 {
+      font-size: 1.75rem;
+    }
+
+    h2 {
+      font-size: 1.4rem;
+    }
+
+    h3 {
+      font-size: 1.2rem;
+    }
+
+    [class*="card"],
+    [class*="grid"],
+    [class*="cards"] {
+      grid-template-columns: 1fr !important;
+    }
+
+    [class*="row"],
+    [class*="flex-row"] {
+      flex-wrap: wrap;
+    }
+
+    [class*="btn-group"],
+    [class*="button-group"] {
+      flex-direction: column;
+      width: 100%;
+    }
+
+    table {
+      display: block;
+      overflow-x: auto;
+    }
+
+    select {
+      font-size: 1rem;
+      padding: 0.6rem 2rem 0.6rem 0.75rem;
+    }
+
+    footer {
+      height: auto;
+      flex-direction: column;
+      text-align: center;
+      padding: 1rem;
+      gap: 0.5rem;
     }
   }
 
-  ::picker(select) {
-    appearance: base-select;
-    border: none;
+  @media (max-width: 480px) {
+    html {
+      font-size: clamp(12px, 4.5vw, 14px);
+    }
+
+    main {
+      padding: 0.5rem;
+      gap: 0.5rem;
+    }
+
+    h1 {
+      font-size: 1.5rem;
+    }
+
+    h2 {
+      font-size: 1.25rem;
+    }
+
+    h3 {
+      font-size: 1.1rem;
+    }
+
+    [style*="grid-template-columns"],
+    [class*="grid-2"],
+    [class*="col-2"] {
+      grid-template-columns: 1fr !important;
+    }
+
+    select {
+      font-size: 0.9rem;
+      letter-spacing: 0.5px;
+    }
   }
 
-  *:focus {
-    outline: none;
-    box-shadow: none;
+  @media (hover: none) and (pointer: coarse) {
+
+    button,
+    a,
+    [role="button"] {
+      min-height: 44px;
+      min-width: 44px;
+    }
+
+    select:hover {
+      transform: none;
+    }
   }
 }
\ No newline at end of file
diff --git a/src/assets/styles/header.css b/src/assets/styles/header.css
index a5e8d49a..7ddb08ef 100644
--- a/src/assets/styles/header.css
+++ b/src/assets/styles/header.css
@@ -5,12 +5,20 @@
   width: 100%;
   z-index: 1000;
   background-color: var(--background);
+  background-image: var(--bg-gradient, none);
+  background-size: cover;
+  background-position: top center;
   height: var(--header-h);
   padding: 0 1.5rem;
   min-height: 5rem;
+  align-items: center;
   display: grid;
-  grid-template-columns: repeat(3, 1fr);
+  grid-template-columns: auto 1fr auto;
   gap: 8px;
+  backdrop-filter: blur(12px);
+  -webkit-backdrop-filter: blur(12px);
+  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
+  transition: background-color 0.3s ease;
 
   .header__brand {
     display: flex;
@@ -18,6 +26,7 @@
     justify-content: space-between;
     align-items: center;
     height: 100%;
+      padding-left: 60px;
 
     .logo__link {
       display: flex;
@@ -40,19 +49,25 @@
       margin-inline-start: 1rem;
       color: var(--primary);
 
-      & span {
-        color: #6d8c3d;
+      & .kbd {
+        color: #120d0d;
+      }
+
+      [data-theme="dark"] & .kbd {
+        color: #ffffff;
       }
     }
   }
 
-
   .nav__links {
     display: flex;
     align-items: center;
     justify-content: center;
-    gap: 2rem;
-    list-style: none;
+    gap: 2.5rem;
+    position: absolute;
+    left: 50%;
+    transform: translateX(-50%);
+    padding-right: 6rem;
 
     a {
       color: var(--text);
@@ -62,11 +77,7 @@
       position: relative;
 
       &:hover {
-        color: var(--primary);
-
-        ::after {
-          width: 100%;
-        }
+        color: #22d3ee;
       }
 
       &::after {
@@ -76,19 +87,41 @@
         left: 0;
         width: 0;
         height: 2px;
-        background-color: var(--primary);
+        background-color: #22d3ee;
         transition: var(--transition);
       }
+
+      &:hover::after {
+        width: 100%;
+      }
     }
   }
 
+  a.is-active {
+    color: #7c3aed !important;
+    font-weight: 700 !important;
+  }
+
+  a.is-active::after {
+    content: '';
+    position: absolute;
+    left: 0;
+    bottom: -6px;
+    width: 100%;
+    height: 3px;
+    border-radius: 999px;
+    background: #7c3aed;
+  }
+
   .action__group {
     display: flex;
     flex-direction: row;
-    align-content: center;
-    justify-content: end;
-    flex-wrap: wrap;
-    gap: 1rem;
+    align-items: center;
+    justify-content: flex-end;
+    flex-wrap: nowrap;
+    gap: 0.75rem;
+    margin-left: auto;
+    justify-self: end;
   }
 
   [slot="header-right"] {
@@ -97,23 +130,430 @@
     max-width: 33vw;
     flex-wrap: nowrap;
     justify-content: flex-end;
-    border: 2px dashed red;
   }
 
   .controls {
     flex-shrink: 0;
   }
+}
+
+/* Hero Search Bar */
+.hero-search {
+  width: 100%;
+  background-color: var(--background);
+  padding: 0.9rem 2rem;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  position: sticky;
+  top: calc(var(--header-h) - 1px);
+  z-index: 999;
+  backdrop-filter: blur(14px);
+  -webkit-backdrop-filter: blur(14px);
+  box-sizing: border-box;
+}
+
+[data-theme="light"] .hero-search {
+  border-bottom: 1px solid #e2e8f0;
+}
+
+.hero-search__wrap {
+  position: relative;
+  width: 100%;
+  max-width: 100%;
+}
+
+.hero-search__box {
+  display: flex;
+  align-items: center;
+  background: var(--background);
+  border: 2px solid #e2e8f0;
+  border-radius: 3rem;
+  padding: 0.75rem 1.5rem;
+  gap: 0.75rem;
+  transition: border-color 0.2s, box-shadow 0.2s;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
+  width: 100%;
+  box-sizing: border-box;
+}
+
+[data-theme="dark"] .hero-search__box {
+  border-color: #334155;
+}
+
+.hero-search__box:focus-within {
+  border-color: #7c3aed;
+  box-shadow: 0 4px 20px rgba(124, 58, 237, 0.2);
+}
+
+.hero-search__icon {
+  font-size: 1.1rem;
+  flex-shrink: 0;
+}
+
+#heroSearch {
+  border: none !important;
+  outline: none !important;
+  font-size: 1rem;
+  flex: 1;
+  background: transparent;
+  color: var(--text);
+  min-width: 0;
+  padding: 0;
+  margin: 0;
+  box-shadow: none !important;
+}
+
+#heroSearch::placeholder {
+  color: #a0aec0;
+  font-size: 1rem;
+}
+
+.hero-search__clear {
+  background: none;
+  border: none;
+  cursor: pointer;
+  color: #a0aec0;
+  font-size: 0.9rem;
+  padding: 0;
+  line-height: 1;
+  flex-shrink: 0;
+}
+
+.hero-search__clear:hover {
+  color: #7c3aed;
+}
+
+.hero-search__dropdown {
+  position: absolute;
+  top: calc(100% + 8px);
+  left: 0;
+  right: 0;
+  background: #ffffff;
+  border: 1.5px solid #ede9fe;
+  border-radius: 16px;
+  box-shadow: 0 16px 40px rgba(124, 58, 237, 0.12), 0 4px 12px rgba(0, 0, 0, 0.08);
+  z-index: 99999;
+  max-height: 420px;
+  overflow-y: auto;
+  padding: 6px 0;
+}
+
+[data-theme="dark"] .hero-search__dropdown {
+  background: #1e293b;
+  border-color: #334155;
+}
+
+/* Spacer */
+.header-spacer {
+  height: 0;
+}
+
+/* ── Hamburger ── */
+.hamburger {
+  display: none;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  gap: 5px;
+  width: 2.5rem;
+  height: 2.5rem;
+  background: transparent;
+  border: none;
+  cursor: pointer;
+  padding: 4px;
+  border-radius: 8px;
+  transition: background 0.2s ease;
+  z-index: 1100;
+  flex-shrink: 0;
+}
+
+.hamburger:hover {
+  background: rgba(255, 255, 255, 0.1);
+}
+
+.hamburger span {
+  display: block;
+  width: 22px;
+  height: 2px;
+  background-color: var(--text);
+  border-radius: 2px;
+  transition: transform 0.35s cubic-bezier(0.23, 1, 0.32, 1),
+    opacity 0.25s ease,
+    width 0.3s ease;
+  transform-origin: center;
+}
+
+.hamburger.open span:nth-child(1) {
+  transform: translateY(7px) rotate(45deg);
+}
+
+.hamburger.open span:nth-child(2) {
+  opacity: 0;
+  width: 0;
+}
+
+.hamburger.open span:nth-child(3) {
+  transform: translateY(-7px) rotate(-45deg);
+}
+
+/* Mobile Overlay */
+.mobile-overlay {
+  display: none;
+  position: fixed;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.5);
+  z-index: 1040;
+  opacity: 0;
+  transition: opacity 0.3s ease;
+  backdrop-filter: blur(4px);
+  -webkit-backdrop-filter: blur(4px);
+
+  /* FIX */
+  pointer-events: none;
+}
+
+.mobile-overlay.open {
+  opacity: 1;
+
+  /* FIX */
+  pointer-events: auto;
+}
+
+
+/* Mobile Menu Drawer */
+.mobile-menu {
+  position: fixed;
+  top: 0;
+  right: 0;
+  width: min(80vw, 300px);
+  height: 100dvh;
+  background: var(--background);
+  background-image: var(--bg-gradient, none);
+  background-size: cover;
+  z-index: 1050;
+  transform: translateX(100%);
+  transition: transform 0.35s cubic-bezier(0.23, 1, 0.32, 1);
+  display: flex;
+  flex-direction: column;
+  padding: 1.5rem 1.25rem;
+  box-shadow: -8px 0 32px rgba(0, 0, 0, 0.4);
+  overflow-y: auto;
+  pointer-events: none;
+}
+
+.mobile-menu.open {
+  transform: translateX(0);
+  pointer-events: auto;
+
+}
+
+.mobile-menu__header {
+  display: flex;
+  flex-direction: column;
+  gap: 1.5rem;
+  margin-bottom: 1rem;
+  padding-bottom: 1rem;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+}
+
+.mobile-logo {
+  font-size: 1.3rem;
+  font-weight: 700;
+  color: var(--primary);
+  text-decoration: none;
+}
+
+.mobile-nav__links {
+  list-style: none;
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+  flex: 1;
+  padding: 0;
+  margin: 0;
+}
+
+.mobile-nav__links li a {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  padding: 0.85rem 1rem;
+  border-radius: 10px;
+  color: var(--text);
+  text-decoration: none;
+  font-weight: 500;
+  font-size: 1rem;
+  transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
+}
+
+.mobile-nav__links li a:hover {
+  background: rgba(255, 255, 255, 0.1);
+  color: var(--primary);
+  transform: translateX(4px);
+}
+
+.mobile-actions {
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+  margin-top: 1.5rem;
+  padding-top: 1.5rem;
+  border-top: 1px solid rgba(255, 255, 255, 0.1);
+}
+
+.mobile-controls {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0.5rem 0;
+  font-size: 0.9rem;
+  color: var(--subtext, var(--text));
+}
 
-  .switch {
-    background-color: black;
-    height: 2rem;
-    width: 2rem;
-    border-radius: 50%;
-    cursor: pointer;
+/* ── Tablet ── */
+@media (max-width: 1024px) {
+  .header {
+    padding: 0 1rem;
+
+    .nav__links {
+      gap: 1.2rem;
+
+      a {
+        font-size: 0.9rem;
+      }
+    }
+
+    .action__group {
+      gap: 0.5rem;
+    }
+
+    [slot="header-right"] {
+      max-width: 40vw;
+    }
+  }
+
+  .hero-search {
+    padding: 0.875rem 1.5rem;
+  }
+}
+
+/* ── Mobile ── */
+@media (max-width: 640px) {
+  .header {
+    grid-template-columns: 1fr;
+    padding: 0 1rem;
+    min-height: 4rem;
+    height: 4rem;
+    align-items: center;
+    gap: 0;
+
+    .nav__links {
+      display: none;
+    }
+
+    .action__group {
+      display: none;
+    }
+
+    [slot="header-right"] {
+      display: none;
+    }
+
+    .header__brand {
+      justify-content: flex-start;
+      gap: 0.5rem;
+
+      .logo__link {
+        font-size: 1.2rem;
+        gap: 0.5rem;
+      }
+
+      .logo {
+        width: 2.2rem;
+        height: 2.2rem;
+      }
+
+      p {
+        font-size: 1.2rem;
+        margin-inline-start: 0.25rem;
+      }
+    }
   }
 
   .header-spacer {
-    min-height: 5rem;
-    border-bottom: 1px dotted grey;
+    height: 4.5rem;
   }
+
+  /* ── HAMBURGER FIX: position fixed so it floats over header ── */
+  .hamburger {
+    display: flex;
+    position: fixed;
+    top: 0.75rem;
+    right: 1rem;
+    z-index: 1100;
+  }
+
+  .mobile-overlay {
+    display: block;
+  }
+
+  .hero-search {
+    padding: 0.75rem 1rem;
+    margin-top: 0;
+    margin-bottom: 0;
+  }
+
+  .hero-search__box {
+    padding: 0.6rem 1rem;
+  }
+
+  #heroSearch {
+    font-size: 0.95rem;
+  }
+}
+
+/* ── Small Mobile ── */
+@media (max-width: 480px) {
+  .header {
+    padding: 0 0.75rem;
+    min-height: 3.5rem;
+    height: 3.5rem;
+
+    .header__brand {
+      .logo__link {
+        font-size: 1.1rem;
+      }
+
+      .logo {
+        width: 2rem;
+        height: 2rem;
+      }
+
+      p {
+        font-size: 1rem;
+      }
+    }
+  }
+
+  .hamburger {
+    top: 0.625rem;
+    right: 0.75rem;
+  }
+
+  .hero-search {
+    padding: 0.625rem 0.75rem;
+  }
+
+  .mobile-menu {
+    width: 85vw;
+    padding: 1.25rem 1rem;
+  }
+}
+
+.sidebar-mobile-wrapper {
+  width: 100%;
+  padding: 0 1rem;
+  margin-top: 1rem;
 }
\ No newline at end of file
diff --git a/src/assets/styles/home.css b/src/assets/styles/home.css
index 86d3557c..99abd815 100644
--- a/src/assets/styles/home.css
+++ b/src/assets/styles/home.css
@@ -1,3 +1,84 @@
 .container__home {
   box-sizing: border-box;
+  width: 100%;
+  max-width: 100%;
+  overflow-x: hidden;
+  padding: 1rem;
+  display: flex;
+  flex-direction: column;
+  gap: 1.5rem;
 }
+
+/* ── Cards Grid ── */
+.home__grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
+  gap: 1.25rem;
+}
+
+/* ── Hero Section ── */
+.home__hero {
+  text-align: center;
+  padding: 2rem 1rem;
+}
+
+.home__hero h1 {
+  font-size: clamp(1.5rem, 5vw, 3rem);
+  font-weight: 800;
+  color: var(--heading, var(--text));
+  margin-bottom: 0.75rem;
+}
+
+.home__hero p {
+  font-size: clamp(0.9rem, 2.5vw, 1.1rem);
+  color: var(--subtext, var(--text));
+  max-width: 600px;
+  margin: 0 auto;
+}
+
+/* TABLET — 1024px*/
+@media (max-width: 1024px) {
+  .container__home {
+    padding: 0.75rem;
+    gap: 1.25rem;
+  }
+
+  .home__grid {
+    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
+    gap: 1rem;
+  }
+}
+
+/* MOBILE — 768px*/
+@media (max-width: 768px) {
+  .container__home {
+    padding: 0.5rem;
+    gap: 1rem;
+  }
+
+  .home__grid {
+    grid-template-columns: repeat(2, 1fr);
+    gap: 0.75rem;
+  }
+
+  .home__hero {
+    padding: 1.25rem 0.5rem;
+  }
+}
+
+/* SMALL MOBILE — 480px*/
+@media (max-width: 480px) {
+  .container__home {
+    padding: 0.4rem;
+    gap: 0.75rem;
+  }
+
+  .home__grid {
+    grid-template-columns: 1fr;
+    gap: 0.6rem;
+  }
+
+  .home__hero {
+    padding: 1rem 0.25rem;
+  }
+}
\ No newline at end of file
diff --git a/src/assets/styles/landing.css b/src/assets/styles/landing.css
index 396f7f10..56b3b3da 100644
--- a/src/assets/styles/landing.css
+++ b/src/assets/styles/landing.css
@@ -1,4 +1,6 @@
-/* CSS Custom Properties for Theming */
+/* ══════════════════════════════════════
+   LANDING PAGE — CSS VARIABLES
+══════════════════════════════════════ */
 :root {
   --primary: #4361ee;
   --primary-light: #4895ef;
@@ -7,6 +9,7 @@
   --text-light: #6c757d;
   --bg: #ffffff;
   --bg-card: #ffffff;
+  --bg-secondary: #f8fafc;
   --border: #dee2e6;
   --shadow: rgba(0, 0, 0, 0.1);
   --header-bg: rgba(255, 255, 255, 0.95);
@@ -15,41 +18,66 @@
   --container-width: min(1200px, 95%);
   --header-height: 80px;
   --footer-height: 200px;
+  --text: #1a1a2e;
+  --text-dark: #0f172a;
 }
 
-
+/* Dark mode — matches globals.css gradient theme */
 [data-theme='dark'] {
-  --primary: #4cc9f0;
-  --primary-light: #4895ef;
-  --secondary: #4361ee;
-  --success: #3a0ca3;
-  --text-light: #adb5bd;
-  --bg: #121212;
-  --bg-card: #1e1e1e;
-  --border: #343a40;
-  --shadow: rgba(0, 0, 0, 0.3);
-  --header-bg: rgba(30, 30, 30, 0.95);
-}
+  --primary: #22d3ee;
+  --primary-light: #67e8f9;
+  --secondary: #0891b2;
+
+  --success: #34d399;
+
+  --text-light: #b8e6ee;
+
+  --bg: transparent;
+
+  --bg-card:
+    linear-gradient(180deg,
+      rgba(3, 26, 32, 0.72) 0%,
+      rgba(5, 46, 56, 0.82) 100%);
+
+  --bg-secondary:
+    rgba(3, 26, 32, 0.72);
+
+  --border:
+    rgba(34, 211, 238, 0.14);
+
+  --shadow:
+    rgba(0, 0, 0, 0.45);
+
+  --header-bg:
+    rgba(2, 6, 8, 0.88);
 
+  --text: #e0f7fa;
 
+  --text-dark: #f0fdff;
+}
+
+/* ══════════════════════════════════════
+   LANDING CONTAINER
+══════════════════════════════════════ */
 .container__landing {
   color: var(--text);
-  background-color: var(--bg);
+  background: transparent;
   transition: var(--transition);
   min-height: 100vh;
+  overflow-x: hidden;
   overflow-y: auto;
 }
 
-
-/* Layout */
+/* ── Hero Wrapper ── */
 .container__hero {
   width: var(--container-width);
   margin: 0 auto;
   padding: 0 1rem;
 }
 
-
-/* Hero Section */
+/* ══════════════════════════════════════
+   HERO SECTION
+══════════════════════════════════════ */
 .hero {
   min-height: calc(100vh - var(--header-height));
   display: flex;
@@ -58,20 +86,16 @@
   color: white;
   position: relative;
   overflow: hidden;
+  padding: 2rem 1rem;
 }
 
 .hero::before {
   content: '';
   position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
+  inset: 0;
   background-image: url('https://i.pinimg.com/1200x/01/6c/ec/016cec5a9d134483c02417cdb290a4a7.jpg');
   background-position: center;
-  background-attachment: scroll;
   background-size: cover;
-  object-fit: cover;
   background-repeat: no-repeat;
   opacity: 0.23;
   pointer-events: none;
@@ -81,40 +105,49 @@
   position: relative;
   z-index: 1;
   max-width: 600px;
+  width: 100%;
 }
 
 .hero h1 {
-  font-size: clamp(2.5rem, 5vw, 4rem);
+  font-size: clamp(2rem, 5vw, 4rem);
   line-height: 1.2;
   margin-bottom: 1.5rem;
+  text-align: left;
 }
 
 .hero p {
-  font-size: 1.25rem;
+  font-size: clamp(1rem, 2.5vw, 1.25rem);
   margin-bottom: 2rem;
   opacity: 0.9;
+  line-height: 1.6;
 }
 
+/* ── CTA Button ── */
 .cta-button {
   display: inline-block;
   background-color: white;
   color: var(--primary);
-  padding: 0.75rem 2rem;
+  padding: 0.85rem 2rem;
   border-radius: 50px;
   text-decoration: none;
   font-weight: 600;
+  font-size: clamp(0.9rem, 2vw, 1rem);
   transition: var(--transition);
   box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
+  white-space: nowrap;
 }
 
 .cta-button:hover {
   transform: translateY(-3px);
   box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
+  color: var(--secondary);
 }
 
-/* Age Categories Section */
+/* ══════════════════════════════════════
+   SECTIONS
+══════════════════════════════════════ */
 .section {
-  padding: 5rem;
+  padding: 4rem 1.5rem;
 }
 
 .section-title {
@@ -123,27 +156,33 @@
 }
 
 .section-title h2 {
-  font-size: clamp(1.75rem, 4vw, 2.5rem);
+  font-size: clamp(1.5rem, 4vw, 2.5rem);
   color: var(--text);
   margin-bottom: 1rem;
+  line-height: 1.3;
 }
 
 .section-title p {
   color: var(--text-light);
   max-width: 600px;
   margin: 0 auto;
+  font-size: clamp(0.9rem, 2vw, 1rem);
+  line-height: 1.6;
 }
 
+/* ══════════════════════════════════════
+   CATEGORY CARDS
+══════════════════════════════════════ */
 .categories-grid {
   display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
-  gap: 2rem;
+  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
+  gap: 1.5rem;
 }
 
 .category-card {
   background-color: var(--bg-card);
   border-radius: var(--border-radius);
-  padding: 2rem;
+  padding: 1.75rem;
   text-align: center;
   box-shadow: 0 5px 15px var(--shadow);
   transition: var(--transition);
@@ -153,43 +192,51 @@
   flex-direction: column;
   align-items: center;
   gap: 1rem;
-
   text-decoration: none;
-
+  -webkit-backdrop-filter: blur(8px);
+  backdrop-filter: blur(8px);
 }
 
 .category-card:hover {
-  transform: translateY(-10px);
+  transform: translateY(-8px);
   box-shadow: 0 15px 30px var(--shadow);
+  border-color: var(--primary);
+}
+
+[data-theme='dark'] .category-card:hover {
+  box-shadow: 0 0 24px rgba(34, 211, 238, 0.18);
 }
 
 .category-icon {
-  width: 80px;
-  height: 80px;
+  width: 75px;
+  height: 75px;
   border-radius: 50%;
   background: linear-gradient(135deg, var(--primary) 0%, var(--primary-light) 100%);
   display: flex;
   align-items: center;
   justify-content: center;
-  color: var(--text-dark);
-  font-size: 2rem;
+  font-size: 1.75rem;
+  flex-shrink: 0;
 }
 
 .category-card h3 {
-  font-size: 1.5rem;
-  color: var(--text-light, black);
-
+  font-size: clamp(1.1rem, 2.5vw, 1.5rem);
+  color: var(--text);
 }
 
 .category-card p {
   color: var(--text-light);
+  font-size: 0.9rem;
+  line-height: 1.5;
 }
 
-/* Games Page */
+/* ══════════════════════════════════════
+   GAMES PAGE
+══════════════════════════════════════ */
 .games-page {
   display: block;
   min-height: calc(100vh - var(--header-height));
-  padding: 3rem 0;
+  padding: 2rem 0;
 }
 
 .page-header {
@@ -199,26 +246,42 @@
   margin-bottom: 2rem;
   padding-bottom: 1rem;
   border-bottom: 1px solid var(--border);
+  flex-wrap: wrap;
+  gap: 1rem;
 }
 
 .back-button {
   display: inline-flex;
   align-items: center;
-  gap: 0.5rem;
-  color: var(--primary);
+  justify-content: center;
+  width: 44px;
+  height: 44px;
+  border-radius: 50%;
+  background: linear-gradient(135deg, rgba(3, 26, 32, 0.92), rgba(5, 46, 56, 0.92));
+  border: 1px solid rgba(34, 211, 238, 0.16);
+  color: #22d3ee;
   text-decoration: none;
-  font-weight: 500;
-  transition: var(--transition);
+  font-weight: 600;
+  position: relative;
+  z-index: 1200;
+  flex-shrink: 0;
+  transition: all 0.25s ease;
+  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
 }
 
 .back-button:hover {
-  gap: 0.75rem;
+  transform: translateY(-2px);
+  border-color: rgba(34, 211, 238, 0.35);
+  box-shadow:
+    0 6px 18px rgba(0, 0, 0, 0.45),
+    0 0 18px rgba(34, 211, 238, 0.14);
 }
 
+/* ── Games Grid ── */
 .games-grid {
   display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
-  gap: 2rem;
+  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
+  gap: 1.5rem;
 }
 
 .game-card {
@@ -228,25 +291,28 @@
   box-shadow: 0 5px 15px var(--shadow);
   transition: var(--transition);
   border: 1px solid var(--border);
+  -webkit-backdrop-filter: blur(8px);
+  backdrop-filter: blur(8px);
 }
 
 .game-card:hover {
   transform: translateY(-5px);
   box-shadow: 0 10px 25px var(--shadow);
+  border-color: var(--primary);
 }
 
 .game-image {
-  height: 200px;
+  height: 180px;
   background-size: cover;
   background-position: center;
 }
 
 .game-content {
-  padding: 1.5rem;
+  padding: 1.25rem;
 }
 
 .game-content h3 {
-  font-size: 1.25rem;
+  font-size: 1.15rem;
   margin-bottom: 0.5rem;
   color: var(--text);
 }
@@ -254,23 +320,25 @@
 .game-content p {
   color: var(--text-light);
   margin-bottom: 1rem;
-  font-size: 0.9rem;
-  min-height: 3rem;
+  font-size: 0.88rem;
+  min-height: 2.5rem;
+  line-height: 1.5;
 }
 
 .game-tags {
   display: flex;
   flex-wrap: wrap;
-  gap: 0.5rem;
-  margin-bottom: 1.5rem;
+  gap: 0.4rem;
+  margin-bottom: 1.25rem;
 }
 
 .game-tag {
   background-color: var(--bg-secondary);
   color: var(--text-light);
-  padding: 0.25rem 0.75rem;
+  padding: 0.2rem 0.65rem;
   border-radius: 50px;
-  font-size: 0.8rem;
+  font-size: 0.78rem;
+  border: 1px solid var(--border);
 }
 
 .game-button {
@@ -284,13 +352,20 @@
   text-decoration: none;
   font-weight: 500;
   transition: var(--transition);
+  min-height: 44px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
 }
 
 .game-button:hover {
   background-color: var(--secondary);
+  transform: translateY(-1px);
 }
 
-/* Footer */
+/* ══════════════════════════════════════
+   FOOTER (landing page internal)
+══════════════════════════════════════ */
 footer {
   background-color: var(--bg-secondary);
   padding: 3rem 0 1.5rem;
@@ -299,15 +374,15 @@ footer {
 
 .footer-content {
   display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
   gap: 2rem;
   margin-bottom: 2rem;
 }
 
 .footer-column h3 {
   color: var(--text);
-  margin-bottom: 1.5rem;
-  font-size: 1.25rem;
+  margin-bottom: 1.25rem;
+  font-size: 1.1rem;
 }
 
 .footer-links {
@@ -315,13 +390,14 @@ footer {
 }
 
 .footer-links li {
-  margin-bottom: 0.75rem;
+  margin-bottom: 0.65rem;
 }
 
 .footer-links a {
   color: var(--text-light);
   text-decoration: none;
   transition: var(--transition);
+  font-size: 0.9rem;
 }
 
 .footer-links a:hover {
@@ -330,7 +406,8 @@ footer {
 
 .social-links {
   display: flex;
-  gap: 1rem;
+  gap: 0.75rem;
+  flex-wrap: wrap;
 }
 
 .social-links a {
@@ -343,52 +420,19 @@ footer {
   color: var(--text);
   border-radius: 50%;
   transition: var(--transition);
+  border: 1px solid var(--border);
 }
 
 .social-links a:hover {
   background-color: var(--primary);
   color: white;
   transform: translateY(-3px);
+  border-color: var(--primary);
 }
 
-.copyright {
-  text-align: center;
-  padding-top: 1.5rem;
-  border-top: 1px solid var(--border);
-  color: var(--text-light);
-  font-size: 0.9rem;
-}
-
-/* Responsive Design */
-@media (max-width: 768px) {
-  .nav-links {
-    display: none;
-  }
-
-  .header-content {
-    justify-content: space-between;
-  }
-
-  .hero-content {
-    text-align: center;
-  }
-
-  .categories-grid {
-    grid-template-columns: 1fr;
-  }
-
-  .games-grid {
-    grid-template-columns: 1fr;
-  }
-
-  .page-header {
-    flex-direction: column;
-    gap: 1rem;
-    align-items: flex-start;
-  }
-}
-
-/* Utility Classes */
+/* ══════════════════════════════════════
+   UTILITY CLASSES
+══════════════════════════════════════ */
 .text-center {
   text-align: center;
 }
@@ -397,47 +441,35 @@ footer {
   margin-top: 2rem;
 }
 
+/* ── Animated Button ── */
 .animated-button {
-  /* Basic Button Styling */
   padding: 12px 24px;
-  font-size: 16px;
-  font-weight: bold;
+  font-size: clamp(0.875rem, 2vw, 1rem);
+  font-weight: 700;
   color: white;
-  background-color: #007bff;
-  /* Primary Blue */
+  background-color: var(--primary);
   border: none;
-  border-radius: 5px;
+  border-radius: 8px;
   cursor: pointer;
   outline: none;
-  /* Remove outline on focus */
   position: relative;
-  /* For pseudo-elements */
   overflow: hidden;
-  /* Hide overflowing animation */
-
-  /* Smooth Transitions for Hover */
   transition: all 0.3s ease-in-out;
+  min-height: 44px;
 }
 
 .animated-button:hover {
-  background-color: #0056b3;
-  /* Darker Blue on hover */
+  background-color: var(--secondary);
   transform: translateY(-2px);
-  /* Slight lift on hover */
-  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
-  /* Subtle shadow */
+  box-shadow: 0 4px 12px var(--shadow);
 }
 
 .animated-button:active {
-  background-color: #004085;
-  /* Even darker blue on click */
   transform: translateY(0);
-  /* Return to original position */
-  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
-  /* Smaller shadow on click */
+  box-shadow: 0 2px 4px var(--shadow);
 }
 
-/* Click Animation (using pseudo-element for a ripple effect) */
+/* Ripple effect */
 .animated-button::before {
   content: '';
   position: absolute;
@@ -446,7 +478,6 @@ footer {
   width: 0;
   height: 0;
   background: rgba(255, 255, 255, 0.3);
-  /* White ripple */
   border-radius: 50%;
   opacity: 0;
   transform: translate(-50%, -50%);
@@ -455,10 +486,180 @@ footer {
 
 .animated-button:active::before {
   width: 200%;
-  /* Expand ripple */
   height: 200%;
-  /* Expand ripple */
   opacity: 1;
   transition: 0s;
-  /* Reset transition for immediate effect */
+}
+
+/* ══════════════════════════════════════
+   TABLET — 1024px
+══════════════════════════════════════ */
+@media (max-width: 1024px) {
+  .section {
+    padding: 3rem 1.25rem;
+  }
+
+  .categories-grid {
+    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+    gap: 1.25rem;
+  }
+
+  .games-grid {
+    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
+    gap: 1.25rem;
+  }
+
+  .hero {
+    padding: 2rem 1.25rem;
+  }
+}
+
+/* ══════════════════════════════════════
+   MOBILE — 768px
+══════════════════════════════════════ */
+@media (max-width: 768px) {
+  .hero {
+    min-height: calc(100svh - 4rem);
+    padding: 2rem 1rem;
+    align-items: flex-start;
+    padding-top: 3rem;
+  }
+
+  .hero-content {
+    text-align: center;
+    margin: 0 auto;
+  }
+
+  .hero h1 {
+    text-align: center;
+  }
+
+  .hero p {
+    text-align: center;
+  }
+
+  .cta-button {
+    display: block;
+    text-align: center;
+    width: fit-content;
+    margin: 0 auto;
+  }
+
+  .section {
+    padding: 2.5rem 0.75rem;
+  }
+
+  .section-title {
+    margin-bottom: 2rem;
+  }
+
+  .categories-grid {
+    grid-template-columns: repeat(2, 1fr);
+    gap: 0.75rem;
+  }
+
+  .category-card {
+    padding: 1.25rem 1rem;
+    gap: 0.75rem;
+  }
+
+  .category-icon {
+    width: 60px;
+    height: 60px;
+    font-size: 1.5rem;
+  }
+
+  .category-card h3 {
+    font-size: 1rem;
+  }
+
+  .games-grid {
+    grid-template-columns: 1fr;
+    gap: 1rem;
+  }
+
+  .game-image {
+    height: 160px;
+  }
+
+  .page-header {
+    flex-direction: column;
+    align-items: flex-start;
+  }
+
+  .footer-content {
+    grid-template-columns: repeat(2, 1fr);
+    gap: 1.5rem;
+  }
+}
+
+/* ══════════════════════════════════════
+   SMALL MOBILE — 480px
+══════════════════════════════════════ */
+@media (max-width: 480px) {
+  .hero {
+    padding: 1.5rem 0.75rem;
+    padding-top: 2rem;
+  }
+
+  .section {
+    padding: 2rem 0.5rem;
+  }
+
+  .categories-grid {
+    grid-template-columns: 1fr;
+    gap: 0.75rem;
+  }
+
+  .category-card {
+    flex-direction: row;
+    text-align: left;
+    padding: 1rem;
+    gap: 1rem;
+  }
+
+  .category-icon {
+    width: 52px;
+    height: 52px;
+    font-size: 1.3rem;
+    flex-shrink: 0;
+  }
+
+  .games-grid {
+    grid-template-columns: 1fr;
+  }
+
+  .footer-content {
+    grid-template-columns: 1fr;
+  }
+
+  .cta-button {
+    width: 100%;
+    text-align: center;
+    padding: 1rem;
+  }
+
+  .animated-button {
+    width: 100%;
+  }
+}
+
+/* ══════════════════════════════════════
+   TOUCH DEVICES
+══════════════════════════════════════ */
+@media (hover: none) and (pointer: coarse) {
+
+  .category-card:hover,
+  .game-card:hover,
+  .cta-button:hover {
+    transform: none;
+  }
+
+  .category-card:active {
+    transform: scale(0.98);
+  }
+
+  .game-card:active {
+    transform: scale(0.99);
+  }
 }
\ No newline at end of file
diff --git a/src/components/Back.astro b/src/components/Back.astro
index 9e4d3ef9..781de71b 100644
--- a/src/components/Back.astro
+++ b/src/components/Back.astro
@@ -1,19 +1,87 @@
 ---
-import BackIcon from "@/assets/icons/back.svg";
+
 ---
 
+<a href="/games" class="back" aria-label="Go back">
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="16"
+    height="16"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    stroke-width="2.5"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+  >
+    <path d="M19 12H5M12 5l-7 7 7 7"></path>
+  </svg>
+</a>
+
 <style is:global>
   .back {
+    position: fixed;
+    top: 10rem;
+    left: 1rem;
+    z-index: 9999;
+
+    width: 44px;
+    height: 44px;
+
     display: flex;
-    cursor: pointer;
-    color: var(--text);
-    width: 2rem;
+    align-items: center;
+    justify-content: center;
+
+    border-radius: 50%;
+    text-decoration: none;
+
+    background: linear-gradient(135deg, rgba(3, 26, 32, 0.96), rgba(5, 46, 56, 0.96));
+
+    border: 1px solid rgba(34, 211, 238, 0.18);
+
+    color: #22d3ee;
+
+    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
+
+    transition:
+      transform 0.2s ease,
+      border-color 0.2s ease,
+      box-shadow 0.2s ease;
   }
+
   .back:hover {
-    color: var(--primary);
+    transform: scale(1.06);
+
+    border-color: rgba(34, 211, 238, 0.4);
+
+    box-shadow:
+      0 6px 18px rgba(0, 0, 0, 0.45),
+      0 0 18px rgba(34, 211, 238, 0.14);
   }
-</style>
 
-<a href="/games" class="back">
-  <BackIcon />
-</a>
+  .back svg {
+    width: 18px;
+    height: 18px;
+  }
+
+  [data-theme="light"] .back {
+    background: white;
+    border: 1px solid #e2e8f0;
+    color: #7c3aed;
+  }
+
+  [data-theme="light"] .back:hover {
+    background: #ede9fe;
+    border-color: #7c3aed;
+    color: #7c3aed;
+  }
+
+  @media (max-width: 768px) {
+    .back {
+      top: 7.8rem;
+      left: 0.9rem;
+      width: 40px;
+      height: 40px;
+    }
+  }
+</style>
diff --git a/src/components/Categories.astro b/src/components/Categories.astro
index 29238e3c..20c56e5b 100644
--- a/src/components/Categories.astro
+++ b/src/components/Categories.astro
@@ -1,54 +1,230 @@
 ---
-
+import { gamesData } from "@/data/gamesData";
 ---
 
-<section class="section panel-anim" id="categories">
-  <div class="">
-    <div class="section-title">
-      <h2>Browse by Age Group</h2>
-      <p>Select an age category to discover games and activities perfectly suited for that developmental stage.</p>
-    </div>
-
-    <div class="categories-grid">
-      <a class="category-card" href="/games/3-5">
-        <div class="category-icon">
-          <i class="fas fa-baby"></i>
-        </div>
-        <h3>3-5 Years</h3>
-        <p>Simple games for early development and creativity</p>
-      </a>
-
-      <a class="category-card" href="/games/6-8">
-        <div class="category-icon">
-          <i class="fas fa-child"></i>
-        </div>
-        <h3>6-8 Years</h3>
-        <p>Engaging activities that promote learning through play</p>
-      </a>
-
-      <a class="category-card" href="/games/9-12">
-        <div class="category-icon">
-          <i class="fas fa-user-graduate"></i>
-        </div>
-        <h3>9-12 Years</h3>
-        <p>Challenging games that develop critical thinking</p>
-      </a>
-
-      <a class="category-card" href="/games/teens">
-        <div class="category-icon">
-          <i class="fas fa-users"></i>
-        </div>
-        <h3>Teens</h3>
-        <p>Social and strategic games for older kids</p>
-      </a>
-
-      <a class="category-card" href="/games/adults">
-        <div class="category-icon">
-          <i class="fas fa-user-friends"></i>
-        </div>
-        <h3>Family</h3>
-        <p>Games for grown-ups and family game nights</p>
-      </a>
-    </div>
+<section class="age-section" id="categories">
+  <h2 class="age-title">
+    <span>🎀</span>
+    Explore by Age Group
+    <span>🎀</span>
+  </h2>
+
+  <div class="age-grid">
+    <a href="/games/3-5" class="age-card" data-label="toddlers" style="--card-bg: #EDE9FE; --card-bg-dark: #3b1f6e;">
+      <span class="age-icon">🧸</span>
+      <h2 class="age-label" style="color: #7C3AED;">Toddlers</h2>
+      <p class="age-range" style="color: #100c17;">1–3 Years</p>
+      <span class="age-explore" style="color: #270466;">Explore →</span>
+    </a>
+
+    <a
+      href="/games/3-5"
+      class="age-card"
+      data-label="preschoolers"
+      style="--card-bg: #FEF9C3; --card-bg-dark: #4a3a00;"
+    >
+      <span class="age-icon">🏠</span>
+      <h2 class="age-label" style="color: #D97706;">Preschoolers</h2>
+      <p class="age-range" style="color: #eb1818e8;">3–5 Years</p>
+      <span class="age-explore" style="color: #ad6009;">Explore →</span>
+    </a>
+
+    <a
+      href="/games/6-8"
+      class="age-card"
+      data-label="early learners"
+      style="--card-bg: #DCFCE7; --card-bg-dark: #0f3d20;"
+    >
+      <span class="age-icon">🎨</span>
+      <h3 class="age-label" style="color: #16A34A;">Early Learners</h3>
+      <p class="age-range" style="color: #9706ea;">5–8 Years</p>
+      <span class="age-explore" style="color: #056c2b;">Explore →</span>
+    </a>
+
+    <a href="/games/9-12" class="age-card" data-label="kids" style="--card-bg: #DBEAFE; --card-bg-dark: #1e3a6e;">
+      <span class="age-icon">💡</span>
+      <h2 class="age-label" style="color: #2563EB;">Kids</h2>
+      <p class="age-range" style="color: #d409d4;">8–12 Years</p>
+      <span class="age-explore" style="color: #0d3da5;">Explore →</span>
+    </a>
+
+    <a href="/games/teens" class="age-card" data-label="teens" style="--card-bg: #FCE7F3; --card-bg-dark: #4a1030;">
+      <span class="age-icon">🎮</span>
+      <h2 class="age-label" style="color: #DB2777;">Teens</h2>
+      <p class="age-range" style="color: #0a55eb;">12+ Years</p>
+      <span class="age-explore" style="color: #870d44;">Explore →</span>
+    </a>
+
+    <a href="/games/adults" class="age-card" data-label="family" style="--card-bg: #FFF0E0; --card-bg-dark: #4a2a00;">
+      <span class="age-icon">👨‍👩‍👧‍👦</span>
+      <h2 class="age-label" style="color: #EA6C00;">Family</h2>
+      <p class="age-range" style="color: #06c663;">All Ages</p>
+      <span class="age-explore" style="color: #6d3606;">Explore →</span>
+    </a>
   </div>
 </section>
+
+<style>
+  .age-section {
+    padding: 3rem 2rem 4rem;
+    text-align: center;
+    background: transparent;
+  }
+
+  :global([data-theme="dark"]) .age-section {
+    background: transparent;
+  }
+
+  .age-title {
+    font-size: 2.2rem;
+    font-weight: 900;
+
+    color: #1a3353;
+
+    margin-bottom: 3rem;
+
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 0.6rem;
+  }
+
+  :global([data-theme="dark"]) .age-title {
+    color: #e0f7fa;
+
+    text-shadow: 0 0 14px rgba(34, 211, 238, 0.08);
+  }
+
+  .age-grid {
+    display: grid;
+
+    grid-template-columns: repeat(3, 1fr);
+
+    gap: 2rem;
+
+    justify-content: center;
+
+    max-width: 980px;
+
+    margin: 0 auto;
+  }
+
+  .age-card {
+    background: var(--card-bg);
+
+    border-radius: 1.6rem;
+
+    padding: 2.2rem 1.4rem 1.8rem;
+
+    width: 100%;
+
+    min-height: 260px;
+
+    text-align: center;
+    text-decoration: none;
+
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+
+    gap: 0.5rem;
+
+    transition:
+      transform 0.25s ease,
+      box-shadow 0.25s ease,
+      border-color 0.25s ease;
+
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.07);
+  }
+
+  :global([data-theme="dark"]) .age-card {
+    background: linear-gradient(180deg, rgba(3, 26, 32, 0.72) 0%, rgba(5, 46, 56, 0.82) 100%);
+
+    border: 1px solid rgba(34, 211, 238, 0.12);
+
+    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
+
+    backdrop-filter: blur(10px);
+    -webkit-backdrop-filter: blur(10px);
+  }
+
+  .age-card:hover {
+    transform: translateY(-6px);
+
+    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.13);
+  }
+
+  :global([data-theme="dark"]) .age-card:hover {
+    border-color: rgba(34, 211, 238, 0.3);
+
+    box-shadow:
+      0 12px 30px rgba(0, 0, 0, 0.45),
+      0 0 22px rgba(34, 211, 238, 0.12);
+  }
+
+  .age-icon {
+    font-size: 3.2rem;
+
+    line-height: 1;
+
+    margin-bottom: 0.8rem;
+  }
+
+  .age-label {
+    font-size: 1.3rem;
+    font-weight: 800;
+
+    margin: 0;
+  }
+
+  .age-range {
+    font-size: 1rem;
+    font-weight: 600;
+
+    margin: 0.2rem 0;
+  }
+
+  .age-explore {
+    font-size: 1rem;
+    font-weight: 700;
+
+    margin-top: 1rem;
+  }
+
+  :global([data-theme="dark"]) .age-label,
+  :global([data-theme="dark"]) .age-range,
+  :global([data-theme="dark"]) .age-explore {
+    color: #7dd3fc !important;
+  }
+
+  /* Tablet */
+
+  @media (max-width: 900px) {
+    .age-grid {
+      grid-template-columns: repeat(2, 1fr);
+
+      gap: 1.5rem;
+
+      max-width: 700px;
+    }
+  }
+
+  /* Mobile */
+
+  @media (max-width: 600px) {
+    .age-grid {
+      grid-template-columns: 1fr;
+
+      max-width: 100%;
+    }
+
+    .age-card {
+      min-height: 220px;
+    }
+
+    .age-title {
+      font-size: 1.7rem;
+    }
+  }
+</style>
diff --git a/src/components/Hero.astro b/src/components/Hero.astro
index bd951938..0998fc7d 100644
--- a/src/components/Hero.astro
+++ b/src/components/Hero.astro
@@ -1,14 +1,250 @@
 ---
-// src/components/Hero.astro
+interface Props {
+  appName?: string;
+}
+const { appName } = Astro.props;
+
+const ageGroups = [
+  {
+    icon: "🧸",
+    label: "Toddlers",
+    range: "1–3 Years",
+    color: "#EDE9FE",
+    darkColor: "#3b1f6e",
+    explore: "#7C3AED",
+    href: "/games/3-5"
+  },
+  {
+    icon: "🏠",
+    label: "Preschoolers",
+    range: "3–5 Years",
+    color: "#FEF9C3",
+    darkColor: "#4a3a00",
+    explore: "#D97706",
+    href: "/games/3-5"
+  },
+  {
+    icon: "🎨",
+    label: "Early Learners",
+    range: "5–8 Years",
+    color: "#DCFCE7",
+    darkColor: "#0f3d20",
+    explore: "#16A34A",
+    href: "/games/6-8"
+  },
+  {
+    icon: "💡",
+    label: "Kids",
+    range: "8–12 Years",
+    color: "#DBEAFE",
+    darkColor: "#1e3a6e",
+    explore: "#2563EB",
+    href: "/games/9-12"
+  },
+  {
+    icon: "🎮",
+    label: "Teens",
+    range: "12+ Years",
+    color: "#FCE7F3",
+    darkColor: "#4a1030",
+    explore: "#DB2777",
+    href: "/games/teens"
+  },
+  {
+    icon: "👨‍👩‍👧‍👦",
+    label: "Family",
+    range: "All Ages",
+    color: "#FFF0E0",
+    darkColor: "#4a2a00",
+    explore: "#EA6C00",
+    href: "/games/adults"
+  }
+];
 ---
 
-<div class="hero">
-  <section class="container__hero" id="scroll-hero">
-    <h1>Find the Perfect Game for Every Age</h1>
-    <p>
-      Discover fun, engaging, and educational activities tailored to different age groups. From toddlers to adults, we
-      have something for everyone!
-    </p>
-    <button id="categoryAnchor" class="animated-button">Explore Categories</button>
-  </section>
-</div>
+<section class="hero-section">
+  <img src="/assets/images/kids-hero1.png" alt="Kids learning together" class="hero-bg-img" loading="eager" />
+</section>
+
+<section class="age-section">
+  <h2 class="age-title">
+    <span>🎀</span>
+    Explore by Age Group
+    <span>🎀</span>
+  </h2>
+  <div class="age-grid">
+    {
+      ageGroups.map((group) => (
+        <a href={group.href} class="age-card" style={`--card-bg: ${group.color}; --card-bg-dark: ${group.darkColor};`}>
+          <span class="age-icon">{group.icon}</span>
+          <h3 class="age-label" style={`color: ${group.explore};`}>
+            {group.label}
+          </h3>
+          <p class="age-range" style={`color: ${group.explore};`}>
+            {group.range}
+          </p>
+          <span class="age-explore" style={`color: ${group.explore};`}>
+            Explore →
+          </span>
+        </a>
+      ))
+    }
+  </div>
+</section>
+
+<style>
+  .hero-section {
+    width: 100%;
+    overflow: hidden;
+    line-height: 0;
+    position: relative;
+  }
+
+  .hero-bg-img {
+    width: 100%;
+    height: auto;
+    display: block;
+    opacity: 1;
+    transition: filter 0.3s ease;
+  }
+
+  /* Dark mode: slight cool overlay via filter, no opacity dimming */
+  :global([data-theme="dark"]) .hero-bg-img {
+    filter: brightness(0.85) saturate(0.9);
+  }
+
+  /* ── Age Section ── */
+  .age-section {
+    padding: 3rem 2rem 4rem;
+    text-align: center;
+    background: transparent;
+  }
+
+  .age-title {
+    font-size: 1.85rem;
+    font-weight: 900;
+    color: #1a3353;
+    margin-bottom: 2.5rem;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 0.6rem;
+  }
+
+  :global([data-theme="dark"]) .age-title {
+    color: #e0f7fa;
+  }
+
+  .age-grid {
+    display: grid;
+    grid-template-columns: repeat(6, 1fr);
+    gap: 1rem;
+    max-width: 1200px;
+    margin: 0 auto;
+  }
+
+  .age-card {
+    background: var(--card-bg);
+    border-radius: 1.4rem;
+    padding: 1.8rem 1rem 1.4rem;
+    text-align: center;
+    text-decoration: none;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 0.3rem;
+    transition:
+      transform 0.2s,
+      box-shadow 0.2s;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.07);
+  }
+
+  :global([data-theme="dark"]) .age-card {
+    background: var(--card-bg-dark);
+    box-shadow: 0 2px 14px rgba(0, 0, 0, 0.35);
+    border: 1px solid rgba(34, 211, 238, 0.15);
+  }
+
+  .age-card:hover {
+    transform: translateY(-6px);
+    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.13);
+  }
+
+  :global([data-theme="dark"]) .age-card:hover {
+    box-shadow: 0 0 20px rgba(34, 211, 238, 0.2);
+    border-color: rgba(34, 211, 238, 0.4);
+  }
+
+  .age-icon {
+    font-size: 2.8rem;
+    line-height: 1;
+    margin-bottom: 0.4rem;
+  }
+  .age-label {
+    font-size: 1.05rem;
+    font-weight: 800;
+    margin: 0;
+  }
+  .age-range {
+    font-size: 0.88rem;
+    font-weight: 600;
+    margin: 0;
+  }
+  .age-explore {
+    font-size: 0.95rem;
+    font-weight: 700;
+    margin-top: 0.4rem;
+  }
+
+  @media (max-width: 1024px) {
+    .age-grid {
+      grid-template-columns: repeat(3, 1fr);
+    }
+  }
+
+  @media (max-width: 768px) {
+    .age-section {
+      padding: 2rem 1rem 3rem;
+    }
+    .age-title {
+      font-size: 1.5rem;
+      margin-bottom: 1.5rem;
+    }
+    .age-grid {
+      grid-template-columns: repeat(2, 1fr);
+      gap: 0.75rem;
+    }
+    .age-card {
+      padding: 1.4rem 0.75rem 1.1rem;
+    }
+    .age-icon {
+      font-size: 2.2rem;
+    }
+    .age-label {
+      font-size: 0.95rem;
+    }
+    .age-range {
+      font-size: 0.8rem;
+    }
+    .age-explore {
+      font-size: 0.85rem;
+    }
+  }
+
+  @media (max-width: 480px) {
+    .age-grid {
+      grid-template-columns: repeat(2, 1fr);
+      gap: 0.6rem;
+    }
+    .age-card {
+      padding: 1.2rem 0.6rem 1rem;
+      border-radius: 1rem;
+    }
+    .age-icon {
+      font-size: 2rem;
+    }
+    .age-label {
+      font-size: 0.88rem;
+    }
+  }
+</style>
diff --git a/src/components/ThemeProvider.astro b/src/components/ThemeProvider.astro
index 3f03e697..3ff9fdd1 100644
--- a/src/components/ThemeProvider.astro
+++ b/src/components/ThemeProvider.astro
@@ -1,45 +1,78 @@
+---
+// ThemeProvider.astro
+---
+
 <script is:inline>
-  const getSystemPreference = () => {
-    return window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
-  };
-
-  const getThemePreference = () => {
-    if (typeof localStorage !== "undefined") {
-      const stored = localStorage.getItem("theme");
-      if (stored === "dark" || stored === "light" || stored === "system") return stored;
+  const sunIcon =
+    '<circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/>';
+  const moonIcon = '<path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"/>';
+
+  /* ── Apply theme ── */
+  function applyTheme(theme) {
+    const html = document.documentElement;
+
+    // 1. Set data-theme
+    html.setAttribute("data-theme", theme);
+    html.classList.toggle("dark", theme === "dark");
+
+    // 2. Directly set html background — CSS layer ko bypass karta hai
+    if (theme === "dark") {
+      html.style.backgroundColor = "#020608";
+      html.style.backgroundImage = "linear-gradient(180deg, #020608 0%, #031a20 50%, #052e38 100%)";
+      html.style.backgroundAttachment = "fixed";
+      html.style.backgroundSize = "cover";
+    } else {
+      html.style.backgroundColor = "#ffffff";
+      html.style.backgroundImage = "none";
+      html.style.backgroundAttachment = "";
+      html.style.backgroundSize = "";
+    }
+
+    // 3. Body transparent rakho
+    if (document.body) {
+      document.body.style.backgroundColor = "transparent";
+      document.body.style.backgroundImage = "none";
     }
-    return "system";
-  };
 
-  function setTheme(theme) {
-    if (!["light", "dark", "system"].includes(theme)) return;
+    // 4. Icon update
+    const icon = document.getElementById("themeIcon");
+    if (icon) icon.innerHTML = theme === "dark" ? sunIcon : moonIcon;
+  }
 
-    document.documentElement.dataset.theme = theme;
+  function getSavedTheme() {
+    return localStorage.getItem("theme") || "light";
+  }
 
-    // Apply the actual theme
-    const actualTheme = theme === "system" ? getSystemPreference() : theme;
-    document.documentElement.classList.toggle("dark", actualTheme === "dark");
+  function toggleTheme() {
+    const next = getSavedTheme() === "dark" ? "light" : "dark";
+    localStorage.setItem("theme", next);
+    applyTheme(next);
+  }
 
-    const meta = document.querySelector("meta[name='theme-color']");
-    const bg = getComputedStyle(document.body).getPropertyValue("--theme-bg");
-    meta?.setAttribute("content", `hsl(${bg || "0, 0%, 100%"})`);
+  function attachToggle() {
+    const btn = document.getElementById("headerThemeToggle");
+    if (!btn) return;
+    const newBtn = btn.cloneNode(true);
+    btn.replaceWith(newBtn);
+    newBtn.addEventListener("click", toggleTheme);
+  }
 
-    localStorage.setItem("theme", theme);
+  function init() {
+    applyTheme(getSavedTheme());
+    attachToggle();
   }
 
-  // Initial load
-  setTheme(getThemePreference());
+  // Immediately — no flash
+  (function () {
+    applyTheme(getSavedTheme());
+  })();
 
-  // Listen to global theme-change events
-  document.addEventListener("theme-change", (e) => {
-    setTheme(e.detail.theme);
-  });
+  if (document.readyState === "loading") {
+    document.addEventListener("DOMContentLoaded", init);
+  } else {
+    init();
+  }
 
-  // Listen for system theme changes
-  window.matchMedia("(prefers-color-scheme: dark)").addEventListener("change", () => {
-    const currentTheme = getThemePreference();
-    if (currentTheme === "system") {
-      setTheme("system");
-    }
-  });
+  document.addEventListener("astro:page-load", init);
+  document.addEventListener("astro:after-swap", () => applyTheme(getSavedTheme()));
 </script>
diff --git a/src/layouts/Base.astro b/src/layouts/Base.astro
index 0fd6559d..ac2b2b7f 100755
--- a/src/layouts/Base.astro
+++ b/src/layouts/Base.astro
@@ -2,10 +2,9 @@
 import ThemeProvider from "@/components/ThemeProvider.astro";
 import BaseHead from "@/layouts/BaseHead";
 import Footer from "@/layouts/common/Footer";
-import Header from "@/layouts/common/Header";
+import Header from "@/layouts/common/Header.astro";
 import Menu from "@/layouts/common/Menu";
 import { siteConfig } from "@/site-config";
-//import Shortcut from "@/components/Shortcut.astro";
 
 const {
   meta: { title, description = siteConfig.description, ogImage },
@@ -13,31 +12,437 @@ const {
 } = Astro.props;
 ---
 
-<html lang={siteConfig.lang} data-theme="system">
+<html lang={siteConfig.lang}>
   <head>
     <BaseHead title={title} description={description} ogImage={ogImage} />
   </head>
   <body id="body" class="body__container">
     <ThemeProvider />
-    <!--<Shortcut />-->
     <Header title={title}>
       <slot name="header-left" slot="left" />
       <slot name="header-right" slot="right" />
     </Header>
     <main id="main" class="main">
-      <div class="sidebar">{sidebar && <Menu />}</div>
-      <div class="content">
+      {
+        sidebar && (
+          <div class="sidebar" id="sidebar">
+            {/* PIN BUTTON — desktop only, sidebar ke andar top-right */}
+            <button class="pin-btn" id="pinBtn" aria-label="Pin sidebar" title="Sidebar pin karo">
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                width="16"
+                height="16"
+                viewBox="0 0 24 24"
+                fill="none"
+                stroke="currentColor"
+                stroke-width="2"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+              >
+                <line x1="12" y1="17" x2="12" y2="22" />
+                <path d="M5 17h14v-1.76a2 2 0 0 0-1.11-1.79l-1.78-.9A2 2 0 0 1 15 10.76V6h1a2 2 0 0 0 0-4H8a2 2 0 0 0 0 4h1v4.76a2 2 0 0 1-1.11 1.79l-1.78.9A2 2 0 0 0 5 15.24Z" />
+              </svg>
+            </button>
+            <Menu />
+          </div>
+        )
+      }
+      {
+        sidebar && (
+          <button class="sidebar-toggle" id="sidebarToggle" aria-label="Toggle sidebar">
+            <span id="toggleIcon" class="mobile-menu-icon">
+              <span />
+              <span />
+            </span>
+          </button>
+        )
+      }
+
+      {/* OVERLAY — mobile pe sidebar ke bahar click karne par close */}
+      <div class="sidebar-overlay" id="sidebarOverlay"></div>
+
+      <div class="content" id="mainContent">
         <slot><p>This is my fallback content, if there is no child passed into slot</p></slot>
       </div>
     </main>
+
+    <style is:global>
+      .main {
+        display: flex;
+        width: 100%;
+        position: relative;
+      }
+
+      /* ── SIDEBAR ── */
+      .sidebar {
+        position: fixed;
+        top: 0;
+        left: 0;
+
+        width: 260px;
+        max-width: 80vw;
+        height: 100vh;
+
+        background: var(--background);
+        z-index: 1200;
+        overflow-y: auto;
+
+        transform: translateX(-100%);
+        transition: transform 0.3s ease;
+        box-shadow: 4px 0 20px rgba(0, 0, 0, 0.12);
+        padding-top: 6rem;
+      }
+
+      /* Sidebar open (overlay mode) */
+      .sidebar.open {
+        transform: translateX(0);
+      }
+
+      /* Sidebar PINNED — desktop only: sidebar layout mein aa jaati hai */
+      .sidebar.pinned {
+        position: sticky;
+        top: 0;
+        transform: translateX(0);
+        height: 100vh;
+        flex-shrink: 0;
+        box-shadow: none;
+        border-right: 1px solid rgba(124, 58, 237, 0.12);
+      }
+
+      /* Content shifts right when pinned */
+      .main.sidebar-pinned .content {
+        margin-left: 0;
+      }
+
+      /* ── PIN BUTTON ── */
+      .pin-btn {
+        position: absolute;
+        top: 4.2rem;
+        right: 10px;
+
+        width: 28px;
+        height: 28px;
+
+        border: 1.5px solid rgba(124, 58, 237, 0.25);
+        border-radius: 8px;
+        background: transparent;
+
+        color: #7c3aed;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+
+        cursor: pointer;
+        opacity: 0.5;
+        transition:
+          opacity 0.2s ease,
+          background 0.2s ease,
+          transform 0.2s ease;
+        z-index: 10;
+      }
+
+      .pin-btn:hover {
+        opacity: 1;
+        background: rgba(124, 58, 237, 0.08);
+      }
+
+      /* Pinned active state */
+      .pin-btn.active {
+        opacity: 1;
+        background: rgba(124, 58, 237, 0.12);
+        border-color: #7c3aed;
+        transform: rotate(45deg); /* pin rotates to show it's locked */
+      }
+
+      /* Pin button sirf desktop pe dikhao */
+      @media (max-width: 768px) {
+        .pin-btn {
+          display: none !important;
+        }
+      }
+
+      /* ── OVERLAY ── */
+      .sidebar-overlay {
+        display: none;
+        position: fixed;
+        inset: 0;
+        background: rgba(0, 0, 0, 0.35);
+        z-index: 1199; /* sidebar ke neeche, content ke upar */
+        cursor: pointer;
+      }
+
+      .sidebar-overlay.show {
+        display: block;
+      }
+
+      /* ── CONTENT ── */
+      .content {
+        flex: 1;
+        min-width: 0;
+        width: 100%;
+        transition: all 0.3s ease;
+      }
+
+      /* ── TOGGLE BUTTON ── */
+      .sidebar-toggle {
+        position: fixed !important;
+
+        top: 16px !important;
+        left: 12px !important;
+
+        width: 42px !important;
+        height: 42px !important;
+
+        border: none;
+        border-radius: 12px;
+
+        background: rgba(255, 255, 255, 0.95);
+        backdrop-filter: blur(12px);
+        -webkit-backdrop-filter: blur(12px);
+
+        color: #7c3aed !important;
+
+        display: flex !important;
+        align-items: center;
+        justify-content: center;
+
+        cursor: pointer;
+
+        z-index: 2147483647 !important;
+
+        opacity: 1 !important;
+        visibility: visible !important;
+        pointer-events: auto !important;
+        overflow: visible !important;
+
+        box-shadow:
+          0 6px 18px rgba(124, 58, 237, 0.16),
+          0 2px 6px rgba(0, 0, 0, 0.08);
+
+        transition:
+          background 0.22s ease,
+          box-shadow 0.22s ease,
+          transform 0.22s ease;
+      }
+
+      /* Pinned hone par toggle button hide karo (desktop) */
+      .main.sidebar-pinned .sidebar-toggle {
+        display: none !important;
+      }
+
+      .sidebar-toggle svg {
+        width: 16px !important;
+        height: 16px !important;
+      }
+
+      @media (max-width: 768px) {
+        .sidebar-toggle {
+          top: 14px !important;
+          left: 10px !important;
+          width: 40px !important;
+          height: 40px !important;
+          display: flex !important;
+          opacity: 1 !important;
+          visibility: visible !important;
+          z-index: 2147483647 !important;
+        }
+
+        .sidebar {
+          width: 82vw;
+          max-width: 300px;
+          /* Mobile pe sidebar hamesha overlay mode mein rahegi, pinned nahi */
+          position: fixed !important;
+          top: 0 !important;
+        }
+
+        /* Mobile pe toggle button kabhi hide mat karo */
+        .main.sidebar-pinned .sidebar-toggle {
+          display: flex !important;
+        }
+      }
+
+      /* ── MOBILE MENU ICON ── */
+      .mobile-menu-icon {
+        display: flex !important;
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
+        gap: 4px;
+        width: 20px;
+        height: 20px;
+      }
+
+      .mobile-menu-icon span {
+        display: block !important;
+        width: 18px;
+        height: 2px;
+        background: #7c3aed;
+        border-radius: 999px;
+      }
+    </style>
+
+    <script>
+      const sidebar = document.getElementById("sidebar") as HTMLElement | null;
+      const toggle = document.getElementById("sidebarToggle") as HTMLElement | null;
+      const icon = document.getElementById("toggleIcon") as HTMLElement | null;
+      const pinBtn = document.getElementById("pinBtn") as HTMLElement | null;
+      const overlay = document.getElementById("sidebarOverlay") as HTMLElement | null;
+      const mainEl = document.getElementById("main") as HTMLElement | null;
+
+      // LocalStorage se pin state yaad rakho
+      let isPinned = localStorage.getItem("sidebarPinned") === "true";
+
+      const desktopIcon = `
+        <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24"
+          fill="none" stroke="currentColor" stroke-width="2"
+          stroke-linecap="round" stroke-linejoin="round">
+          <rect x="3" y="4" width="18" height="16" rx="2"></rect>
+          <line x1="9" y1="4" x2="9" y2="20"></line>
+        </svg>
+      `;
+
+      const mobileIcon = `
+        <div style="display:flex;flex-direction:column;gap:4px;align-items:center;justify-content:center;">
+          <span style="width:18px;height:2px;background:#7c3aed;border-radius:999px;display:block;"></span>
+          <span style="width:18px;height:2px;background:#7c3aed;border-radius:999px;display:block;"></span>
+          <span style="width:18px;height:2px;background:#7c3aed;border-radius:999px;display:block;"></span>
+        </div>
+      `;
+
+      function isMobile() {
+        return window.innerWidth <= 768;
+      }
+
+      function setClosedIcon() {
+        if (!icon) return;
+        if (isMobile()) {
+          icon.classList.add("mobile-menu-icon");
+          icon.innerHTML = mobileIcon;
+        } else {
+          icon.classList.remove("mobile-menu-icon");
+          icon.innerHTML = desktopIcon;
+        }
+      }
+
+      function applyPinState() {
+        if (!sidebar || !mainEl || !pinBtn) return;
+
+        if (isPinned && !isMobile()) {
+          sidebar.classList.add("pinned");
+          sidebar.classList.remove("open");
+          mainEl.classList.add("sidebar-pinned");
+          pinBtn.classList.add("active");
+          if (overlay) overlay.classList.remove("show");
+        } else {
+          sidebar.classList.remove("pinned");
+          mainEl.classList.remove("sidebar-pinned");
+          pinBtn.classList.remove("active");
+        }
+      }
+
+      function openSidebar() {
+        if (!sidebar) return;
+        sidebar.classList.add("open");
+        // Overlay sirf mobile pe dikhao
+        if (isMobile() && overlay) {
+          overlay.classList.add("show");
+        }
+        if (icon) {
+          icon.classList.remove("mobile-menu-icon");
+          icon.innerHTML = "✕";
+        }
+      }
+
+      function closeSidebar() {
+        if (!sidebar) return;
+        sidebar.classList.remove("open");
+        if (overlay) overlay.classList.remove("show");
+        setClosedIcon();
+      }
+
+      // ── PIN TOGGLE ──
+      if (pinBtn) {
+        pinBtn.addEventListener("click", (e) => {
+          e.stopPropagation();
+          if (isMobile()) return; // mobile pe pin kaam nahi karta
+
+          isPinned = !isPinned;
+          localStorage.setItem("sidebarPinned", String(isPinned));
+          applyPinState();
+        });
+      }
+
+      // ── SIDEBAR TOGGLE BUTTON ──
+      if (toggle && sidebar && icon) {
+        sidebar.classList.remove("open");
+        setClosedIcon();
+
+        // Page load pe pin state restore karo
+        applyPinState();
+
+        toggle.addEventListener("click", () => {
+          if (isPinned && !isMobile()) return; // pinned hai to toggle kuch nahi karega
+
+          const isOpen = sidebar.classList.toggle("open");
+
+          if (isOpen) {
+            openSidebar();
+          } else {
+            closeSidebar();
+          }
+        });
+      }
+
+      // ── OVERLAY CLICK — sidebar close karo ──
+      if (overlay) {
+        overlay.addEventListener("click", () => {
+          closeSidebar();
+        });
+      }
+
+      // ── OUTSIDE CLICK — desktop pe sidebar close karo ──
+      document.addEventListener("click", (e) => {
+        if (!sidebar || !toggle) return;
+        if (isPinned && !isMobile()) return;
+
+        const target = e.target as Node;
+        const clickedInsideSidebar = sidebar.contains(target);
+        const clickedToggle = toggle.contains(target);
+
+        if (!clickedInsideSidebar && !clickedToggle) {
+          closeSidebar();
+        }
+      });
+
+      // ── RESIZE — mobile <-> desktop switch ──
+      window.addEventListener("resize", () => {
+        if (isMobile()) {
+          // Mobile pe pinned state ignore karo, sidebar band karo
+          if (sidebar) {
+            sidebar.classList.remove("pinned");
+          }
+          if (mainEl) mainEl.classList.remove("sidebar-pinned");
+          if (pinBtn) pinBtn.classList.remove("active");
+          if (!sidebar?.classList.contains("open")) {
+            setClosedIcon();
+          }
+        } else {
+          // Desktop pe wapas aao to pin state restore karo
+          applyPinState();
+          if (!sidebar?.classList.contains("open") && !isPinned) {
+            setClosedIcon();
+          }
+        }
+      });
+    </script>
+
     <Footer />
+
     <script>
       if ("serviceWorker" in navigator) {
-        // Always unregister existing workers first
         navigator.serviceWorker
           .getRegistrations()
           .then((registrations) => {
-            // Unregister all existing service workers
             const unregisterPromises = registrations.map(async (registration) => {
               return registration.unregister().then((success) => {
                 if (success) {
@@ -48,20 +453,15 @@ const {
                 return success;
               });
             });
-
-            // Wait for all unregister to complete
             return Promise.all(unregisterPromises);
           })
           .then(() => {
-            // Only register new service worker in production
             if (!import.meta.env.DEV) {
-              // or `process.env.NODE_ENV !== 'development'`
               window.addEventListener("load", () => {
                 navigator.serviceWorker
                   .register("/service-worker.js", { scope: "/" })
                   .then((registration) => {
                     console.log("Service Worker successfully registered:", registration.scope);
-                    // Optional: Check for updates
                     registration.update().then(() => {
                       console.log("Service Worker checked for updates");
                     });
diff --git a/src/layouts/common/Footer.astro b/src/layouts/common/Footer.astro
index 1543be44..1416181b 100644
--- a/src/layouts/common/Footer.astro
+++ b/src/layouts/common/Footer.astro
@@ -1,91 +1,140 @@
 ---
 import "@/assets/styles/footer.css";
-import ToggleIcon from "@/assets/icons/toggle.svg";
 ---
 
-<div class="container__footer">
-  <div class="footer__main-content">
-    <!-- Brand and description -->
-    <div class="footer__brand-section">
-      <div class="brand">
-        abcd<span class="kbd">kbd</span>
+<footer class="container__footer">
+  <div class="footer__inner">
+    <div class="footer__main-content">
+      <!-- Brand -->
+      <div class="footer__brand-section">
+        <div class="brand">abcd<span class="kbd">kbd</span></div>
+        <p class="footer__tagline">Making learning fun and engaging for young minds everywhere.</p>
+        <span class="footer__badge">🎓 Free to Learn</span>
       </div>
-      <p>Making learning fun and engaging for young minds everywhere.</p>
-      <div class="social hide">
-        <a href="https://twitter.com/abcd_kbd" aria-label="X" target="_blank" rel="noopener noreferrer"
-          ><i class="fa-brands fa-x-twitter"></i></a
-        >
-        <a href="https://facebook.com/" aria-label="Facebook" target="_blank" rel="noopener noreferrer"
-          ><i class="fa-brands fa-facebook"></i></a
-        >
-        <a href="https://instagram.com/" aria-label="Instagram" target="_blank" rel="noopener noreferrer"
-          ><i class="fa-brands fa-instagram"></i></a
-        >
-        <a href="https://youtube.com/" aria-label="YouTube" target="_blank" rel="noopener noreferrer"
-          ><i class="fa-brands fa-youtube"></i></a
-        >
-      </div>
-      <!-- Theme Toggle Button -->
-      <button class="footer-theme-toggle" aria-label="Toggle theme">
-        <ToggleIcon width={30} height={30} />
-        <span>Toggle Theme</span>
-      </button>
-    </div>
-    <!-- Navigation columns -->
-    <div class="footer__nav">
-      <details class="footer__nav--item" open>
-        <summary class="footer__nav--title">
-          <span>Learning</span>
-        </summary>
-        <div class="footer__nav--links">
-          <a href="/alphabets">Reading</a>
-          <a href="/math">Math</a>
-          <a href="/crossword">Games</a>
-          <a href="/draw">Creativity</a>
-          <a href="/map">India Map</a>
+
+      <!-- Nav -->
+      <nav class="footer__nav">
+        <div class="footer__nav--item">
+          <button class="footer__nav--title" type="button" aria-expanded="false" aria-controls="footer-col-1">
+            <span>Learning</span>
+            <i class="fa fa-chevron-down chevron"></i>
+          </button>
+          <div class="footer__nav--links" id="footer-col-1">
+            <a href="/alphabets">Reading</a>
+            <a href="/math">Math</a>
+            <a href="/crossword">Games</a>
+            <a href="/draw">Creativity</a>
+            <a href="/map">India Map</a>
+          </div>
+        </div>
+
+        <div class="footer__nav--item">
+          <button class="footer__nav--title" type="button" aria-expanded="false" aria-controls="footer-col-2">
+            <span>General</span>
+            <i class="fa fa-chevron-down chevron"></i>
+          </button>
+          <div class="footer__nav--links" id="footer-col-2">
+            <a href="/faq">FAQs</a>
+            <a href="/support">Support</a>
+            <a href="/blog">Blog</a>
+            <a href="/about">About Us</a>
+            <a href="/contact">Contact Us</a>
+          </div>
         </div>
-      </details>
-      <details class="footer__nav--item" open>
-        <summary class="footer__nav--title">
-          <span>General</span>
-        </summary>
-        <div class="footer__nav--links">
-          <a href="/faq">FAQs</a>
-          <a href="/support">Support</a>
-          <a href="/blog">Blog</a>
-          <a href="/about">About Us</a>
-          <a href="/contact">Contact Us</a>
+
+        <div class="footer__nav--item">
+          <button class="footer__nav--title" type="button" aria-expanded="false" aria-controls="footer-col-3">
+            <span>Resources</span>
+            <i class="fa fa-chevron-down chevron"></i>
+          </button>
+          <div class="footer__nav--links" id="footer-col-3">
+            <a href="/school">School Programs</a>
+            <a href="/classroom">Classroom Tools</a>
+            <a href="/teacher">Teacher Resources</a>
+            <a href="/parent">Parent Resources</a>
+          </div>
         </div>
-      </details>
+      </nav>
     </div>
-    <details class="footer__nav--item" open>
-      <summary class="footer__nav--title">
-        <span>Resources</span>
-      </summary>
-      <div class="footer__nav--links">
-        <a href="/school">School Programs</a>
-        <a href="/classroom">Classroom Tools</a>
-        <a href="/teacher">Teacher Resources</a>
-        <a href="/parent">Parent Resources</a>
+
+    <!-- Copyright -->
+    <div class="copyright">
+      <span class="copyright__text">© 2025 recursivezero.com. All rights reserved.</span>
+      <div class="copyright__links">
+        <a href="/privacy">Privacy Policy</a>
+        <span class="sep">|</span>
+        <a href="/terms">Terms of Service</a>
+        <span class="sep">|</span>
+        <a href="/cookies">Cookies</a>
       </div>
-    </details>
+    </div>
   </div>
-</div>
-<div class="copyright">
-  © 2025 recursivezero.com. All rights reserved.
-  <a href="/privacy">Privacy Policy</a> | <a href="/terms">Terms and Conditions</a> | <a href="/cookies">Cookies</a>
-</div>
-
-<script>
-  const themeBtn = document.querySelector(".footer-theme-toggle");
-
-  themeBtn?.addEventListener("click", () => {
-    const current = document.documentElement.dataset.theme || "system";
-    const themes = ["system", "light", "dark"];
-    const currentIndex = themes.indexOf(current);
-    const nextIndex = (currentIndex + 1) % themes.length;
-    const next = themes[nextIndex];
-    // Dispatch the same event your ThemeProvider listens for
-    document.dispatchEvent(new CustomEvent("theme-change", { detail: { theme: next } }));
+</footer>
+
+<script is:inline>
+  function initFooter() {
+    var isMobile = window.innerWidth <= 768;
+    var items = document.querySelectorAll(".footer__nav--item");
+
+    items.forEach(function (item) {
+      var btn = item.querySelector(".footer__nav--title");
+      var links = item.querySelector(".footer__nav--links");
+      if (!btn || !links) return;
+
+      if (!isMobile) {
+        // Desktop: links hamesha visible, button non-clickable
+        links.style.display = "flex";
+        btn.style.pointerEvents = "none";
+        btn.style.cursor = "default";
+        btn.setAttribute("aria-expanded", "true");
+      } else {
+        // Mobile: links hidden by default
+        links.style.display = "none";
+        btn.style.pointerEvents = "auto";
+        btn.style.cursor = "pointer";
+        btn.setAttribute("aria-expanded", "false");
+      }
+    });
+
+    if (!isMobile) return;
+
+    // Mobile: button click handler
+    items.forEach(function (item) {
+      var btn = item.querySelector(".footer__nav--title");
+      var links = item.querySelector(".footer__nav--links");
+      if (!btn || !links) return;
+
+      // Remove old handler
+      var newBtn = btn.cloneNode(true);
+      btn.parentNode.replaceChild(newBtn, btn);
+
+      newBtn.addEventListener("click", function () {
+        var isOpen = newBtn.getAttribute("aria-expanded") === "true";
+
+        // Sab band karo
+        items.forEach(function (el) {
+          var b = el.querySelector(".footer__nav--title");
+          var l = el.querySelector(".footer__nav--links");
+          if (b) b.setAttribute("aria-expanded", "false");
+          if (l) l.style.display = "none";
+        });
+
+        // Agar band tha toh kholo
+        if (!isOpen) {
+          newBtn.setAttribute("aria-expanded", "true");
+          links.style.display = "flex";
+        }
+      });
+    });
+  }
+
+  initFooter();
+
+  var _rt;
+  window.addEventListener("resize", function () {
+    clearTimeout(_rt);
+    _rt = setTimeout(initFooter, 150);
   });
+
+  document.addEventListener("astro:page-load", initFooter);
 </script>
diff --git a/src/layouts/common/Header.astro b/src/layouts/common/Header.astro
index fc810e4b..67ebd0c3 100755
--- a/src/layouts/common/Header.astro
+++ b/src/layouts/common/Header.astro
@@ -1,8 +1,104 @@
 ---
 import "@/assets/styles/header.css";
-import { APP_NAME } from "@/utils/constants";
+import { APP_NAME, NavbarLinks } from "@/utils/constants";
+import { DATASET } from "@/mappers/dataset";
+import { gamesData } from "@/data/gamesData";
 import { Picture } from "astro:assets";
 import logoImage from "/public/assets/images/48x48.png";
+import stateData from "@/data/state.json";
+import glossaryData from "@/data/glossary.json";
+import numberData from "@/data/numbers.json";
+
+const navItems = NavbarLinks.filter((l) => l.isActive).map((l) => ({
+  name: l.name || l.title || "",
+  path: l.path,
+  type: "page",
+  sub: ""
+}));
+
+const alphabetItems = Object.keys(DATASET).map((key) => ({
+  name: key.charAt(0).toUpperCase() + key.slice(1),
+  path: `/alphabets/${key}/playground/`,
+  type: "alphabet",
+  sub: DATASET[key].description || ""
+}));
+
+const gameItems = Object.values(gamesData)
+  .flat()
+  .map((game) => ({
+    name: game.title,
+    path: game.link,
+    type: "game",
+    sub: game.description || ""
+  }));
+
+const stateItems = stateData
+  .filter((s) => s.isActive)
+  .flatMap((s) => [
+    { name: s.name, path: `/map/${s.id}`, type: "state", sub: s.capital ? `Capital: ${s.capital}` : "" },
+    { name: s.dance, path: `/map/${s.id}`, type: "dance", sub: `State: ${s.name}` },
+    ...(s.festival ? [{ name: s.festival, path: `/map/${s.id}`, type: "festival", sub: `State: ${s.name}` }] : []),
+    ...(s.capital ? [{ name: s.capital, path: `/map/${s.id}`, type: "capital", sub: `Capital of ${s.name}` }] : []),
+    ...(s.famous_food ? [{ name: s.famous_food, path: `/map/${s.id}`, type: "food", sub: `Food of ${s.name}` }] : []),
+    ...(s.famous_place
+      ? [{ name: s.famous_place, path: `/map/${s.id}`, type: "place", sub: `Place in ${s.name}` }]
+      : [])
+  ]);
+
+const glossaryItems = Object.entries(glossaryData).map(([key, val]) => ({
+  name: val.title || key.charAt(0).toUpperCase() + key.slice(1),
+  path: `/glossary/${key}`,
+  type: "glossary",
+  sub: val.description || ""
+}));
+
+const numberItems = Object.entries(numberData).map(([key, val]) => ({
+  name: val.title || key.charAt(0).toUpperCase() + key.slice(1),
+  path: `/numbers/${key}`,
+  type: "numbers",
+  sub: val.description || ""
+}));
+
+const varnmalaItems = [
+  { name: "Varnmala Hindi", path: "/varnmala/hindi", type: "varnmala", sub: "Hindi Varnmala" },
+  { name: "Varnmala English", path: "/varnmala/english", type: "varnmala", sub: "English Varnmala" },
+  { name: "Varnmala Listen", path: "/varnmala/listen", type: "varnmala", sub: "Listen & Learn" },
+  { name: "Varnmala Play", path: "/varnmala/play", type: "varnmala", sub: "Play & Learn" },
+  { name: "Varnmala Write", path: "/varnmala/write", type: "varnmala", sub: "Write Practice" },
+  { name: "Barahkhadi", path: "/varnmala/barahkhadi", type: "varnmala", sub: "Hindi Barahkhadi" }
+];
+
+const galleryItems = [
+  { name: "Gallery Queue", path: "/gallery/queue", type: "gallery", sub: "Queue Gallery" },
+  { name: "Gallery Slider", path: "/gallery/slider", type: "gallery", sub: "Slider Gallery" },
+  { name: "Gallery Stack", path: "/gallery/stack", type: "gallery", sub: "Stack Gallery" }
+];
+
+const canvasItems = [
+  { name: "Canvas Draw", path: "/canvas", type: "canvas", sub: "Drawing Canvas" },
+  { name: "Canvas Quote", path: "/canvas/quote", type: "canvas", sub: "Quote Canvas" },
+  { name: "Canvas Text", path: "/canvas/text", type: "canvas", sub: "Text Canvas" }
+];
+
+const hidenseekItems = [
+  { name: "Hide N Seek Grid", path: "/hidenseek", type: "hidenseek", sub: "Grid Game" },
+  { name: "Hide N Seek KBD", path: "/hidenseek/kbd", type: "hidenseek", sub: "Keyboard Game" }
+];
+
+const allSearchItems = [
+  ...gameItems,
+  ...alphabetItems,
+  ...stateItems,
+  ...glossaryItems,
+  ...numberItems,
+  ...varnmalaItems,
+  ...galleryItems,
+  ...canvasItems,
+  ...hidenseekItems,
+  ...navItems
+];
+
+const allSearchItemsJSON = JSON.stringify(allSearchItems);
 ---
 
 <header class="header">
@@ -16,13 +112,521 @@ import logoImage from "/public/assets/images/48x48.png";
   <div class="nav__links">
     <a href="/" class:list={{ "is-active": Astro.url.pathname === "/home" || Astro.url.pathname === "/" }}>Home</a>
     <a href="/about" class:list={{ "is-active": Astro.url.pathname.startsWith("/about") }}>About</a>
-    <a href="/parent" class:list={{ "is-active": Astro.url.pathname.startsWith("/parent") }}>Parents</a>
-    <a href="/teacher" class:list={{ "is-active": Astro.url.pathname.startsWith("/teacher") }}>Teachers</a>
+    <a href="/games" class:list={{ "is-active": Astro.url.pathname.startsWith("/games") }}>Categories</a>
+    <a href="/contact" class:list={{ "is-active": Astro.url.pathname.startsWith("/contact") }}>Contact Us</a>
   </div>
 
   <div class="action__group">
     <slot name="left" />
     <slot name="right" />
+    <button class="theme-toggle" id="headerThemeToggle" aria-label="Toggle theme" title="Toggle Theme">
+      <svg
+        id="themeIcon"
+        xmlns="http://www.w3.org/2000/svg"
+        width="18"
+        height="18"
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke="currentColor"
+        stroke-width="2"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      >
+        <circle cx="12" cy="12" r="5"></circle>
+        <line x1="12" y1="1" x2="12" y2="3"></line>
+        <line x1="12" y1="21" x2="12" y2="23"></line>
+        <line x1="4.22" y1="4.22" x2="5.64" y2="5.64"></line>
+        <line x1="18.36" y1="18.36" x2="19.78" y2="19.78"></line>
+        <line x1="1" y1="12" x2="3" y2="12"></line>
+        <line x1="21" y1="12" x2="23" y2="12"></line>
+        <line x1="4.22" y1="19.78" x2="5.64" y2="18.36"></line>
+        <line x1="18.36" y1="5.64" x2="19.78" y2="4.22"></line>
+      </svg>
+    </button>
   </div>
 </header>
+
+<button class="hamburger" id="hamburger" aria-label="Toggle menu">
+  <span></span>
+  <span></span>
+  <span></span>
+</button>
+
+<div class="mobile-overlay" id="mobileOverlay"></div>
+
+<div class="mobile-menu" id="mobileMenu">
+  <div class="mobile-menu__header">
+    <a href="/" class="mobile-logo">
+      abcd<span style="color:#14b8a6;">kbd</span>
+    </a>
+
+    <ul class="mobile-nav__links">
+      <li><a href="/">🏠 Home</a></li>
+      <li><a href="/about">ℹ️ About</a></li>
+      <li><a href="/games">🧩 Categories</a></li>
+      <li><a href="/contact">📩 Contact Us</a></li>
+    </ul>
+
+    <div class="mobile-actions">
+      <div class="mobile-controls">
+        <span>Toggle Theme</span>
+        <button class="theme-toggle" id="mobileThemeToggle" aria-label="Toggle theme">
+          <svg
+            id="mobileThemeIcon"
+            xmlns="http://www.w3.org/2000/svg"
+            width="18"
+            height="18"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="2"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+          >
+            <circle cx="12" cy="12" r="5"></circle>
+            <line x1="12" y1="1" x2="12" y2="3"></line>
+            <line x1="12" y1="21" x2="12" y2="23"></line>
+            <line x1="4.22" y1="4.22" x2="5.64" y2="5.64"></line>
+            <line x1="18.36" y1="18.36" x2="19.78" y2="19.78"></line>
+            <line x1="1" y1="12" x2="3" y2="12"></line>
+            <line x1="21" y1="12" x2="23" y2="12"></line>
+            <line x1="4.22" y1="19.78" x2="5.64" y2="18.36"></line>
+            <line x1="18.36" y1="5.64" x2="19.78" y2="4.22"></line>
+          </svg>
+        </button>
+      </div>
+    </div>
+  </div>
+</div>
+
+<div class="hero-search">
+  <div class="hero-search__wrap">
+    <div class="hero-search__box" id="heroSearchBox">
+      <span class="hero-search__icon">🔍</span>
+      <input type="text" id="heroSearch" placeholder="Search games, alphabets, states..." autocomplete="off" />
+      <button id="heroClear" class="hero-search__clear" style="display:none;">✕</button>
+    </div>
+    <div class="hero-search__dropdown" id="heroSuggestions" style="display:none;"></div>
+  </div>
+</div>
+
 <div class="header-spacer"></div>
+
+<style is:global>
+  .theme-toggle {
+    background: none;
+    border: 1.5px solid #e2e8f0;
+    border-radius: 50%;
+    width: 36px;
+    height: 36px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    color: #0ed4f7;
+    transition: all 0.2s ease;
+    flex-shrink: 0;
+  }
+  .theme-toggle:hover {
+    background: #ede9fe;
+    border-color: #0cd9e0;
+    transform: rotate(20deg);
+  }
+  [data-theme="dark"] .theme-toggle {
+    border-color: #334155;
+    color: #16ade4;
+  }
+  [data-theme="dark"] .theme-toggle:hover {
+    background: #e9e6ee;
+    border-color: #0ba4ce;
+  }
+  .gs-section-title {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    font-size: 11px;
+    font-weight: 700;
+    color: #7c3aed;
+    padding: 8px 16px 4px;
+    text-transform: uppercase;
+    letter-spacing: 0.06em;
+    border-top: 1px solid #f1f5f9;
+    margin-top: 2px;
+  }
+  .gs-section-title:first-child {
+    border-top: none;
+    margin-top: 0;
+  }
+  .gs-result-item {
+    display: flex !important;
+    align-items: center !important;
+    justify-content: space-between !important;
+    padding: 7px 16px !important;
+    text-decoration: none !important;
+    color: #1e293b !important;
+    font-size: 13px !important;
+    font-weight: 500 !important;
+    transition: background 0.12s !important;
+    gap: 10px !important;
+  }
+  .gs-result-item:hover {
+    background: #f5f3ff !important;
+    color: #7c3aed !important;
+  }
+  .gs-result-left {
+    display: flex !important;
+    align-items: center !important;
+    gap: 8px !important;
+    flex: 1 !important;
+    min-width: 0 !important;
+  }
+  .gs-emoji-box {
+    width: 30px !important;
+    height: 30px !important;
+    border-radius: 8px !important;
+    display: flex !important;
+    align-items: center !important;
+    justify-content: center !important;
+    font-size: 15px !important;
+    flex-shrink: 0 !important;
+  }
+  .gs-result-info {
+    display: flex !important;
+    flex-direction: column !important;
+    min-width: 0 !important;
+  }
+  .gs-result-name {
+    font-size: 13px !important;
+    font-weight: 600 !important;
+    color: inherit !important;
+    white-space: nowrap !important;
+    overflow: hidden !important;
+    text-overflow: ellipsis !important;
+  }
+  .gs-result-sub {
+    font-size: 11px !important;
+    color: #94a3b8 !important;
+    white-space: nowrap !important;
+    overflow: hidden !important;
+    text-overflow: ellipsis !important;
+  }
+  .gs-type-tag {
+    font-size: 10px !important;
+    font-weight: 700 !important;
+    padding: 2px 7px !important;
+    border-radius: 20px !important;
+    flex-shrink: 0 !important;
+    text-transform: capitalize !important;
+  }
+  .gs-empty {
+    padding: 20px 16px;
+    text-align: center;
+    color: #94a3b8;
+    font-size: 14px;
+  }
+  .gs-c-game {
+    background: #dcfce7 !important;
+  }
+  .gs-c-alphabet {
+    background: #dbeafe !important;
+  }
+  .gs-c-page {
+    background: #fef9c3 !important;
+  }
+  .gs-c-state {
+    background: #ffe4e6 !important;
+  }
+  .gs-c-dance {
+    background: #fce7f3 !important;
+  }
+  .gs-c-festival {
+    background: #fef3c7 !important;
+  }
+  .gs-c-capital {
+    background: #e0f2fe !important;
+  }
+  .gs-c-food {
+    background: #fff7ed !important;
+  }
+  .gs-c-place {
+    background: #f0fdf4 !important;
+  }
+  .gs-c-glossary {
+    background: #f3e8ff !important;
+  }
+  .gs-c-numbers {
+    background: #fef9c3 !important;
+  }
+  .gs-c-varnmala {
+    background: #fce7f3 !important;
+  }
+  .gs-c-gallery {
+    background: #e0f2fe !important;
+  }
+  .gs-c-canvas {
+    background: #dcfce7 !important;
+  }
+  .gs-c-hidenseek {
+    background: #fef3c7 !important;
+  }
+  .gs-t-game {
+    background: #dcfce7 !important;
+    color: #16a34a !important;
+  }
+  .gs-t-alphabet {
+    background: #dbeafe !important;
+    color: #2563eb !important;
+  }
+  .gs-t-page {
+    background: #fef9c3 !important;
+    color: #d97706 !important;
+  }
+  .gs-t-state {
+    background: #ffe4e6 !important;
+    color: #e11d48 !important;
+  }
+  .gs-t-dance {
+    background: #fce7f3 !important;
+    color: #db2777 !important;
+  }
+  .gs-t-festival {
+    background: #fef3c7 !important;
+    color: #d97706 !important;
+  }
+  .gs-t-capital {
+    background: #e0f2fe !important;
+    color: #0284c7 !important;
+  }
+  .gs-t-food {
+    background: #fff7ed !important;
+    color: #ea580c !important;
+  }
+  .gs-t-place {
+    background: #f0fdf4 !important;
+    color: #16a34a !important;
+  }
+  .gs-t-glossary {
+    background: #f3e8ff !important;
+    color: #7c3aed !important;
+  }
+  .gs-t-numbers {
+    background: #fef9c3 !important;
+    color: #ca8a04 !important;
+  }
+  .gs-t-varnmala {
+    background: #fce7f3 !important;
+    color: #db2777 !important;
+  }
+  .gs-t-gallery {
+    background: #e0f2fe !important;
+    color: #0284c7 !important;
+  }
+  .gs-t-canvas {
+    background: #dcfce7 !important;
+    color: #16a34a !important;
+  }
+  .gs-t-hidenseek {
+    background: #fef3c7 !important;
+    color: #d97706 !important;
+  }
+</style>
+
+<script is:inline define:vars={{ allSearchItemsJSON }}>
+  window.__searchItems = JSON.parse(allSearchItemsJSON);
+
+  const groupTitle = {
+    game: "🎮 Games",
+    alphabet: "🔤 Alphabets",
+    page: "📄 Pages",
+    state: "🗺️ States",
+    dance: "💃 Dances",
+    festival: "🎉 Festivals",
+    capital: "🏛️ Capitals",
+    food: "🍛 Foods",
+    place: "📍 Places",
+    glossary: "📖 Glossary",
+    numbers: "🔢 Numbers",
+    varnmala: "अ Varnmala",
+    gallery: "🖼️ Gallery",
+    canvas: "🎨 Canvas",
+    hidenseek: "🔍 Hide N Seek"
+  };
+  const typeEmoji = {
+    game: "🎮",
+    alphabet: "🔤",
+    page: "📄",
+    state: "🗺️",
+    dance: "💃",
+    festival: "🎉",
+    capital: "🏛️",
+    food: "🍛",
+    place: "📍",
+    glossary: "📖",
+    numbers: "🔢",
+    varnmala: "अ",
+    gallery: "🖼️",
+    canvas: "🎨",
+    hidenseek: "🔍"
+  };
+
+  function buildDropdown(query, dropdown) {
+    const items = window.__searchItems || [];
+    const q = query.trim().toLowerCase();
+    if (!q) {
+      dropdown.style.display = "none";
+      return;
+    }
+    const matched = items.filter((item) => item.name && item.name.toLowerCase().includes(q)).slice(0, 25);
+    if (matched.length === 0) {
+      dropdown.innerHTML = `<div class="gs-empty">No results for "<strong>${query}</strong>"</div>`;
+      dropdown.style.display = "block";
+      return;
+    }
+    const groups = {};
+    matched.forEach((item) => {
+      if (!groups[item.type]) groups[item.type] = [];
+      groups[item.type].push(item);
+    });
+    let html = "";
+    for (const [type, items2] of Object.entries(groups)) {
+      html += `<div class="gs-section-title">${groupTitle[type] || type}</div>`;
+      items2.forEach((item) => {
+        html += `<a href="${item.path}" class="gs-result-item">
+          <div class="gs-result-left">
+            <div class="gs-emoji-box gs-c-${type}">${typeEmoji[type] || "•"}</div>
+            <div class="gs-result-info">
+              <span class="gs-result-name">${item.name}</span>
+              ${item.sub ? `<span class="gs-result-sub">${item.sub}</span>` : ""}
+            </div>
+          </div>
+          <span class="gs-type-tag gs-t-${type}">${type}</span>
+        </a>`;
+      });
+    }
+    dropdown.innerHTML = html;
+    dropdown.style.display = "block";
+  }
+
+  function initHeroSearch() {
+    const input = document.getElementById("heroSearch");
+    const clearBtn = document.getElementById("heroClear");
+    const dropdown = document.getElementById("heroSuggestions");
+    if (!input) return;
+    input.addEventListener("input", (e) => {
+      const q = e.target.value;
+      if (clearBtn) clearBtn.style.display = q ? "block" : "none";
+      buildDropdown(q, dropdown);
+    });
+    clearBtn &&
+      clearBtn.addEventListener("click", () => {
+        input.value = "";
+        if (dropdown) dropdown.style.display = "none";
+        if (clearBtn) clearBtn.style.display = "none";
+        input.focus();
+      });
+    input.addEventListener("keydown", (e) => {
+      if (e.key === "Escape") {
+        if (dropdown) dropdown.style.display = "none";
+        input.blur();
+      }
+    });
+    document.addEventListener("click", (e) => {
+      if (!e.target.closest(".hero-search__wrap") && dropdown) dropdown.style.display = "none";
+    });
+  }
+
+  const sunIcon = `<circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/>`;
+  const moonIcon = `<path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"/>`;
+
+  /* ── ONLY FIX: applyThemeStyles added ── */
+  function applyThemeStyles(theme) {
+    const html = document.documentElement;
+    html.setAttribute("data-theme", theme);
+    html.classList.toggle("dark", theme === "dark");
+    if (theme === "dark") {
+      html.style.backgroundColor = "#020608";
+      html.style.backgroundImage = "linear-gradient(180deg, #020608 0%, #031a20 50%, #052e38 100%)";
+      html.style.backgroundAttachment = "fixed";
+      html.style.backgroundSize = "cover";
+    } else {
+      html.style.backgroundColor = "#ffffff";
+      html.style.backgroundImage = "none";
+      html.style.backgroundAttachment = "";
+      html.style.backgroundSize = "";
+    }
+    if (document.body) {
+      document.body.style.backgroundColor = "transparent";
+      document.body.style.backgroundImage = "none";
+    }
+  }
+
+  function updateThemeIcon() {
+    const theme = localStorage.getItem("theme") || "light";
+    const themeIcon = document.getElementById("themeIcon");
+    const mobileThemeIcon = document.getElementById("mobileThemeIcon");
+    if (themeIcon) themeIcon.innerHTML = theme === "dark" ? sunIcon : moonIcon;
+    if (mobileThemeIcon) mobileThemeIcon.innerHTML = theme === "dark" ? sunIcon : moonIcon;
+  }
+
+  function initThemeToggle() {
+    const headerThemeToggle = document.getElementById("headerThemeToggle");
+    const mobileThemeToggle = document.getElementById("mobileThemeToggle");
+
+    function toggleTheme() {
+      const current = localStorage.getItem("theme") || "light";
+      const next = current === "dark" ? "light" : "dark";
+      localStorage.setItem("theme", next);
+      applyThemeStyles(next);
+      updateThemeIcon();
+    }
+
+    headerThemeToggle?.addEventListener("click", toggleTheme);
+    mobileThemeToggle?.addEventListener("click", toggleTheme);
+
+    // On load — apply saved theme
+    applyThemeStyles(localStorage.getItem("theme") || "light");
+    updateThemeIcon();
+  }
+
+  function initHamburger() {
+    const hamburger = document.getElementById("hamburger");
+    const menuClose = document.getElementById("menuClose");
+    const mobileMenu = document.getElementById("mobileMenu");
+    const mobileOverlay = document.getElementById("mobileOverlay");
+
+    function openMenu() {
+      hamburger?.classList.add("open");
+      mobileMenu?.classList.add("open");
+      mobileOverlay?.classList.add("open");
+      document.body.style.overflow = "hidden";
+    }
+    function closeMenu() {
+      hamburger?.classList.remove("open");
+      mobileMenu?.classList.remove("open");
+      mobileOverlay?.classList.remove("open");
+      document.body.style.overflow = "";
+    }
+
+    hamburger?.addEventListener("click", () => {
+      if (mobileMenu?.classList.contains("open")) {
+        closeMenu();
+      } else {
+        openMenu();
+      }
+    });
+    menuClose?.addEventListener("click", closeMenu);
+    mobileOverlay?.addEventListener("click", closeMenu);
+    document.querySelectorAll(".mobile-nav__links a").forEach((link) => {
+      link.addEventListener("click", closeMenu);
+    });
+  }
+
+  function init() {
+    initHeroSearch();
+    initThemeToggle();
+    initHamburger();
+  }
+
+  init();
+  document.addEventListener("astro:page-load", init);
+</script>
diff --git a/src/pages/contact.astro b/src/pages/contact.astro
index 407f98da..43f15ca0 100644
--- a/src/pages/contact.astro
+++ b/src/pages/contact.astro
@@ -3,66 +3,526 @@ import "@/assets/styles/contact.css";
 import BaseLayout from "@/layouts/Base";
 import TitleLayout from "@/layouts/TitleLayout";
 import Back from "@/components/Back.astro";
-import CopyIcon from "@/assets/icons/copy.svg";
-import GitHubIcon from "@/assets/icons/github.svg";
-
-const meta = {
-  title: "Contact Us",
-  description:
-    "Reach out to the abcdkbd team via email or connect with us on GitHub to collaborate or provide feedback."
-};
+import bannerImg from "@/assets/screenshots/light/contact-banner.png";
 ---
 
-<style>
-  .copy {
-    width: 24px;
-  }
-</style>
-<BaseLayout meta={meta}>
-  <Back />
-  <TitleLayout title="Get in Touch" />
-  <div class="container__contact">
-    <div class="contact__wrapper">
-      <div class="contact__info">
-        <h3>feel free to connect</h3>
-        <div class="info__item">
-          <a href="mailto:abcdkbd@outlook.com" class="mail">Mail us at<span>abcdkbd@outlook.com</span></a>
-          <div id="copy" class="copy"><CopyIcon /></div>
+<BaseLayout
+  meta={{
+    title: "Contact Us",
+    description:
+      "Reach out to the abcdkbd team via email or connect with us on GitHub to collaborate or provide feedback."
+  }}
+>
+  <!-- BANNER IMAGE -->
+  <div style="max-width: 1400px; margin: 24px auto; border-radius: 18px; overflow: hidden;">
+    <img
+      src={bannerImg.src}
+      alt="Contact Us Banner"
+      style="width: 100%; height: auto; display: block; border-radius: 18px;"
+    />
+  </div>
+
+  <!-- CARDS -->
+  <div
+    style="max-width: 1400px; margin: 0 auto 40px; display: grid; grid-template-columns: 1fr 1fr; gap: 24px; padding: 0 24px;"
+  >
+    <!-- LEFT: Send Us a Message -->
+    <div
+      class="contact-card contact-card-left"
+      style="background: #edf0f6; border-radius: 16px; padding: 28px 28px 32px; box-shadow: 0 2px 16px rgba(0,0,0,0.07);"
+    >
+      <div
+        style="display: flex; align-items: center; gap: 10px; font-size: 1.15rem; font-weight: 800; color: #1e1b4b; margin-bottom: 22px;"
+      >
+        <div
+          style="width: 32px; height: 32px; background: #f0f0ff; border-radius: 8px; display: flex; align-items: center; justify-content: center;"
+        >
+          <svg
+            width="18"
+            height="18"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="#6366f1"
+            stroke-width="2.2"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+          >
+            <path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"></path>
+            <path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"></path>
+          </svg>
+        </div>
+        Send Us a Message
+      </div>
+
+      <!-- Name + Email -->
+      <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 14px;">
+        <div style="position: relative;">
+          <span style="position: absolute; left: 11px; top: 50%; transform: translateY(-50%); display: flex;">
+            <svg
+              width="16"
+              height="16"
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="#9ca3af"
+              stroke-width="2"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+            >
+              <path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path><circle cx="12" cy="7" r="4"></circle>
+            </svg>
+          </span>
+          <input
+            id="contact-name"
+            type="text"
+            placeholder="Your Name"
+            style="width:100%; border:1.5px solid #e5e7eb; border-radius:10px; padding:11px 14px 11px 38px; font-size:0.9rem; color:#374151; outline:none; background:#fafafa;"
+          />
+        </div>
+        <div style="position: relative;">
+          <span style="position: absolute; left: 11px; top: 50%; transform: translateY(-50%); display: flex;">
+            <svg
+              width="16"
+              height="16"
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="#9ca3af"
+              stroke-width="2"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+            >
+              <rect x="2" y="4" width="20" height="16" rx="2"></rect><path d="M2 7l10 7 10-7"></path>
+            </svg>
+          </span>
+          <input
+            id="contact-email"
+            type="email"
+            placeholder="Your Email"
+            style="width:100%; border:1.5px solid #e5e7eb; border-radius:10px; padding:11px 14px 11px 38px; font-size:0.9rem; color:#374151; outline:none; background:#fafafa;"
+          />
         </div>
-        <div class="info__item">
-          <a href="https://github.com/recursivezero" target="_blank" rel="noopener noreferrer"
-            >Find us on <span class="social"><GitHubIcon />GitHub</span></a
+      </div>
+
+      <!-- Subject -->
+      <div style="position: relative; margin-bottom: 14px;">
+        <span style="position: absolute; left: 11px; top: 50%; transform: translateY(-50%); display: flex;">
+          <svg
+            width="16"
+            height="16"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="#9ca3af"
+            stroke-width="2"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+          >
+            <path d="M20.59 13.41l-7.17 7.17a2 2 0 0 1-2.83 0L2 12V2h10l8.59 8.59a2 2 0 0 1 0 2.82z"></path>
+            <line x1="7" y1="7" x2="7.01" y2="7"></line>
+          </svg>
+        </span>
+        <input
+          id="contact-subject"
+          type="text"
+          placeholder="Subject"
+          style="width:100%; border:1.5px solid #e5e7eb; border-radius:10px; padding:11px 14px 11px 38px; font-size:0.9rem; color:#374151; outline:none; background:#fafafa;"
+        />
+      </div>
+
+      <!-- Message -->
+      <div style="position: relative; margin-bottom: 4px;">
+        <span style="position: absolute; left: 11px; top: 13px; display: flex;">
+          <svg
+            width="16"
+            height="16"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="#9ca3af"
+            stroke-width="2"
+            stroke-linecap="round"
+            stroke-linejoin="round"
           >
+            <path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"></path>
+          </svg>
+        </span>
+        <textarea
+          id="contact-message"
+          placeholder="Your Message"
+          style="width:100%; border:1.5px solid #e5e7eb; border-radius:10px; padding:11px 14px 11px 38px; font-size:0.9rem; color:#374151; outline:none; background:#fafafa; min-height:90px; resize:vertical;"
+        ></textarea>
+      </div>
+
+      <!-- Send Button -->
+      <button
+        id="send-btn"
+        style="width:100%; margin-top:18px; background:#6366f1; color:#fff; border:none; border-radius:10px; padding:13px; font-size:1rem; font-weight:700; cursor:pointer; display:flex; align-items:center; justify-content:center; gap:8px; transition: background 0.25s ease, transform 0.15s ease, box-shadow 0.25s ease;"
+      >
+        <svg
+          id="send-icon"
+          width="17"
+          height="17"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="#fff"
+          stroke-width="2.2"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+        >
+          <line x1="22" y1="2" x2="11" y2="13"></line>
+          <polygon points="22 2 15 22 11 13 2 9 22 2"></polygon>
+        </svg>
+        <span id="send-text">Send Message</span>
+      </button>
+    </div>
+
+    <!-- RIGHT: Get in Touch -->
+    <div
+      class="contact-card contact-card-right"
+      style="background: #fff; border-radius: 16px; padding: 28px 28px 32px; box-shadow: 0 2px 16px rgba(0,0,0,0.07); position: relative; overflow: hidden;"
+    >
+      <!-- Decorative dots -->
+      <div
+        style="position:absolute; top:18px; right:155px; width:8px; height:8px; border-radius:50%; background:#6366f1; opacity:0.5;"
+      >
+      </div>
+      <div
+        style="position:absolute; top:55px; right:125px; width:10px; height:10px; border-radius:50%; background:#f59e0b; opacity:0.7;"
+      >
+      </div>
+      <div
+        style="position:absolute; bottom:80px; right:155px; width:7px; height:7px; border-radius:50%; background:#06b6d4; opacity:0.5;"
+      >
+      </div>
+      <div
+        style="position:absolute; bottom:48px; right:118px; width:8px; height:8px; border-radius:50%; background:#6366f1; opacity:0.4;"
+      >
+      </div>
+
+      <!-- Title -->
+      <div
+        style="display:flex; align-items:center; gap:10px; font-size:1.15rem; font-weight:800; color:#1e1b4b; margin-bottom:22px;"
+      >
+        <div
+          style="width:36px; height:36px; background:#fff0f0; border-radius:50%; display:flex; align-items:center; justify-content:center; flex-shrink:0;"
+        >
+          <svg
+            width="18"
+            height="18"
+            viewBox="0 0 24 24"
+            fill="#ef4444"
+            stroke="#ef4444"
+            stroke-width="1.5"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+          >
+            <path
+              d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"
+            ></path>
+          </svg>
         </div>
+        Get in Touch
       </div>
+
+      <!-- Contact Items -->
+      <div style="display:flex; flex-direction:column; gap:18px;">
+        <!-- Email -->
+        <div class="contact-item" style="display:flex; align-items:center; gap:14px;">
+          <div
+            class="contact-icon"
+            style="width:42px; height:42px; border-radius:50%; background:#6366f1; display:flex; align-items:center; justify-content:center; flex-shrink:0;"
+          >
+            <svg
+              width="20"
+              height="20"
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="#fff"
+              stroke-width="2"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+            >
+              <rect x="2" y="4" width="20" height="16" rx="2"></rect><path d="M2 7l10 7 10-7"></path>
+            </svg>
+          </div>
+          <div>
+            <strong style="display:block; font-size:0.92rem; font-weight:800; color:#1e1b4b;">Email Us</strong>
+            <a href="mailto:abcdkbd@outlook.com" style="font-size:0.85rem; color:#6b7280; text-decoration:none;"
+              >abcdkbd@outlook.com</a
+            >
+          </div>
+        </div>
+
+        <!-- Call -->
+        <div class="contact-item" style="display:flex; align-items:center; gap:14px;">
+          <div
+            class="contact-icon"
+            style="width:42px; height:42px; border-radius:50%; background:#06b6d4; display:flex; align-items:center; justify-content:center; flex-shrink:0;"
+          >
+            <svg
+              width="20"
+              height="20"
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="#fff"
+              stroke-width="2"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+            >
+              <path
+                d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07A19.5 19.5 0 0 1 4.69 12 19.79 19.79 0 0 1 1.61 3.4 2 2 0 0 1 3.6 1.22h3a2 2 0 0 1 2 1.72c.127.96.361 1.903.7 2.81a2 2 0 0 1-.45 2.11L7.91 8.78a16 16 0 0 0 6.29 6.29l.94-.94a2 2 0 0 1 2.11-.45c.907.339 1.85.573 2.81.7A2 2 0 0 1 22 16.92z"
+              ></path>
+            </svg>
+          </div>
+          <div>
+            <strong style="display:block; font-size:0.92rem; font-weight:800; color:#1e1b4b;">Call Us</strong>
+            <span style="font-size:0.85rem; color:#6b7280;">+91 12345 67890</span>
+          </div>
+        </div>
+
+        <!-- Location -->
+        <div class="contact-item" style="display:flex; align-items:center; gap:14px;">
+          <div
+            class="contact-icon"
+            style="width:42px; height:42px; border-radius:50%; background:#10b981; display:flex; align-items:center; justify-content:center; flex-shrink:0;"
+          >
+            <svg
+              width="20"
+              height="20"
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="#fff"
+              stroke-width="2"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+            >
+              <path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"></path><circle cx="12" cy="10" r="3"></circle>
+            </svg>
+          </div>
+          <div>
+            <strong style="display:block; font-size:0.92rem; font-weight:800; color:#1e1b4b;">Our Location</strong>
+            <span style="font-size:0.85rem; color:#6b7280;">India</span>
+          </div>
+        </div>
+
+        <!-- Hours -->
+        <div class="contact-item" style="display:flex; align-items:center; gap:14px;">
+          <div
+            class="contact-icon"
+            style="width:42px; height:42px; border-radius:50%; background:#f59e0b; display:flex; align-items:center; justify-content:center; flex-shrink:0;"
+          >
+            <svg
+              width="20"
+              height="20"
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="#fff"
+              stroke-width="2"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+            >
+              <circle cx="12" cy="12" r="10"></circle><polyline points="12 6 12 12 16 14"></polyline>
+            </svg>
+          </div>
+          <div>
+            <strong style="display:block; font-size:0.92rem; font-weight:800; color:#1e1b4b;">Working Hours</strong>
+            <span style="font-size:0.85rem; color:#6b7280;">Mon - Sat: 9:00 AM – 6:00 PM</span>
+          </div>
+        </div>
+      </div>
+
+      <!-- Envelope illustration -->
+      <svg
+        style="position:absolute; top:50%; right:32px; transform:translateY(-50%) rotate(12deg); width:170px; max-width:42%;"
+        viewBox="0 0 130 115"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <ellipse cx="18" cy="72" rx="16" ry="10" fill="#dbeafe" opacity="0.85"></ellipse>
+        <ellipse cx="10" cy="68" rx="10" ry="8" fill="#dbeafe" opacity="0.85"></ellipse>
+        <ellipse cx="112" cy="28" rx="14" ry="9" fill="#dbeafe" opacity="0.85"></ellipse>
+        <rect x="10" y="42" width="110" height="68" rx="8" fill="#fbbf24"></rect>
+        <path d="M10 42 L65 78 L120 42" fill="#fde68a" stroke="#f59e0b" stroke-width="1"></path>
+        <path d="M10 110 L65 80 L120 110 Z" fill="#f59e0b"></path>
+        <path d="M10 42 L10 110 L65 80 Z" fill="#f59e0b" opacity="0.5"></path>
+        <path d="M120 42 L120 110 L65 80 Z" fill="#f59e0b" opacity="0.5"></path>
+        <rect
+          x="34"
+          y="12"
+          width="62"
+          height="52"
+          rx="5"
+          fill="#fffbeb"
+          stroke="#fde68a"
+          stroke-width="1.5"
+          transform="rotate(8 65 38)"></rect>
+        <line x1="48" y1="30" x2="86" y2="35" stroke="#e5e7eb" stroke-width="2" stroke-linecap="round"></line>
+        <line x1="46" y1="39" x2="84" y2="44" stroke="#e5e7eb" stroke-width="2" stroke-linecap="round"></line>
+        <line x1="46" y1="48" x2="72" y2="51" stroke="#e5e7eb" stroke-width="2" stroke-linecap="round"></line>
+        <path d="M65 20 C65 20 59 14 54 18 C49 22 56 30 65 36 C74 30 81 22 76 18 C71 14 65 20 65 20Z" fill="#f472b6"
+        ></path>
+      </svg>
     </div>
   </div>
 </BaseLayout>
 
+<link href="https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700;800&display=swap" rel="stylesheet" />
+
+<style>
+  /* ── Card hover transitions ── */
+  .contact-card {
+    transition:
+      transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1),
+      box-shadow 0.35s ease,
+      background 0.3s ease;
+    will-change: transform, box-shadow;
+    cursor: default;
+  }
+
+  .contact-card:hover {
+    transform: translateY(-8px) scale(1.012);
+    box-shadow:
+      0 24px 56px rgba(99, 102, 241, 0.13),
+      0 6px 20px rgba(0, 0, 0, 0.08) !important;
+  }
+
+  .contact-card-left:hover {
+    background: #e4e8f5 !important;
+  }
+
+  .contact-card-right:hover {
+    background: #f5f6ff !important;
+  }
+
+  /* ── Contact item hover (right card rows) ── */
+  .contact-item {
+    border-radius: 12px;
+    padding: 6px 10px;
+    margin: -6px -10px;
+    transition:
+      background 0.22s ease,
+      transform 0.22s ease;
+  }
+  .contact-item:hover {
+    background: rgba(99, 102, 241, 0.06);
+    transform: translateX(5px);
+  }
+
+  /* ── Icon pop on contact-item hover ── */
+  .contact-item .contact-icon {
+    transition:
+      transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1),
+      box-shadow 0.3s ease;
+  }
+  .contact-item:hover .contact-icon {
+    transform: scale(1.18) rotate(-8deg);
+    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
+  }
+
+  /* ── Input focus glow ── */
+  .contact-card-left input,
+  .contact-card-left textarea {
+    transition:
+      border-color 0.2s ease,
+      box-shadow 0.2s ease,
+      background 0.2s ease;
+  }
+  .contact-card-left input:focus,
+  .contact-card-left textarea:focus {
+    border-color: #6366f1 !important;
+    background: #fff !important;
+    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.13);
+    outline: none;
+  }
+
+  /* ── Send button ── */
+  #send-btn:hover {
+    background: #4f46e5 !important;
+    transform: translateY(-2px);
+    box-shadow: 0 6px 20px rgba(99, 102, 241, 0.4);
+  }
+  #send-btn:active {
+    transform: translateY(0px) scale(0.98);
+    box-shadow: none;
+  }
+  #send-btn.success {
+    background: #10b981 !important;
+    box-shadow: 0 6px 20px rgba(16, 185, 129, 0.4);
+  }
+  #send-btn.error {
+    background: #ef4444 !important;
+    box-shadow: 0 6px 20px rgba(239, 68, 68, 0.4);
+  }
+</style>
+
 <script>
-  const copyButton = document.getElementById("copy-email-btn");
-  if (copyButton) {
-    const emailText = document.getElementById("email-text")?.innerText;
-    const copyIcon = copyButton.querySelector("i");
-    // Add a null check for both emailText and copyIcon
-    if (emailText && copyIcon) {
-      copyButton.addEventListener("click", () => {
-        navigator.clipboard
-          .writeText(emailText)
-          .then(() => {
-            // Success feedback
-            copyButton.title = "Copied!";
-
-            // Revert back after 2 seconds
-            setTimeout(() => {
-              copyButton.title = "Copy email";
-            }, 2000);
-          })
-          .catch((err) => {
-            console.error("Failed to copy email: ", err);
-            alert("Failed to copy email.");
-          });
+  const btn = document.getElementById("send-btn") as HTMLButtonElement;
+  const sendText = document.getElementById("send-text") as HTMLSpanElement;
+  const sendIcon = document.getElementById("send-icon") as unknown as SVGElement;
+
+  const ICON_SEND = `<line x1="22" y1="2" x2="11" y2="13"/><polygon points="22 2 15 22 11 13 2 9 22 2"/>`;
+  const ICON_CHECK = `<polyline points="20 6 9 17 4 12"/>`;
+  const ICON_ERROR = `<line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/>`;
+  const ICON_LOADING = `<circle cx="12" cy="12" r="9" stroke-dasharray="28" stroke-dashoffset="10"/>`;
+
+  function resetBtn() {
+    btn.disabled = false;
+    btn.classList.remove("success", "error");
+    sendText.textContent = "Send Message";
+    sendIcon.innerHTML = ICON_SEND;
+  }
+
+  btn?.addEventListener("click", async () => {
+    const name = (document.getElementById("contact-name") as HTMLInputElement).value.trim();
+    const email = (document.getElementById("contact-email") as HTMLInputElement).value.trim();
+    const subject = (document.getElementById("contact-subject") as HTMLInputElement).value.trim();
+    const message = (document.getElementById("contact-message") as HTMLTextAreaElement).value.trim();
+
+    // Validation
+    if (!name || !email || !subject || !message) {
+      btn.classList.add("error");
+      sendText.textContent = "Fill all fields!";
+      sendIcon.innerHTML = ICON_ERROR;
+      setTimeout(resetBtn, 2000);
+      return;
+    }
+
+    // Loading
+    btn.disabled = true;
+    sendText.textContent = "Sending...";
+    sendIcon.innerHTML = ICON_LOADING;
+
+    try {
+      const res = await fetch("https://api.web3forms.com/submit", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({
+          access_key: "a575bf0e-2d2c-425d-8e48-f8d716c09131",
+          name,
+          email,
+          subject,
+          message
+        })
       });
+
+      const data = await res.json();
+
+      if (data.success) {
+        btn.classList.add("success");
+        sendText.textContent = "Message Sent!";
+        sendIcon.innerHTML = ICON_CHECK;
+
+        (document.getElementById("contact-name") as HTMLInputElement).value = "";
+        (document.getElementById("contact-email") as HTMLInputElement).value = "";
+        (document.getElementById("contact-subject") as HTMLInputElement).value = "";
+        (document.getElementById("contact-message") as HTMLTextAreaElement).value = "";
+
+        setTimeout(resetBtn, 3000);
+      } else {
+        throw new Error("Failed");
+      }
+    } catch {
+      btn.classList.add("error");
+      sendText.textContent = "Failed! Try again";
+      sendIcon.innerHTML = ICON_ERROR;
+      setTimeout(resetBtn, 3000);
     }
-  }
+  });
 </script>
diff --git a/src/pages/draw.astro b/src/pages/draw.astro
index a2403125..45c6405d 100644
--- a/src/pages/draw.astro
+++ b/src/pages/draw.astro
@@ -13,6 +13,22 @@ const meta = {
 };
 ---
 
+<style>
+  :global(.sidebar-toggle) {
+    display: none !important;
+  }
+
+  :global(.back) {
+    position: fixed !important;
+    top: 7rem !important;
+    left: 0.5rem !important;
+    width: 34px !important;
+    height: 34px !important;
+    border-radius: 50% !important;
+    z-index: 9999 !important;
+  }
+</style>
+
 <BaseLayout meta={meta}>
   <MobileSplash stay={true} />
   <Back />
diff --git a/src/pages/games/[age].astro b/src/pages/games/[age].astro
index d368368b..fa973eeb 100644
--- a/src/pages/games/[age].astro
+++ b/src/pages/games/[age].astro
@@ -1,15 +1,13 @@
 ---
 import "@/assets/styles/landing.css";
-
 import Back from "@/components/Back.astro";
 import GamesGrid from "@/components/GamesGrid.astro";
 import { gamesData, getAgeGroupDisplayName } from "@/data/gamesData";
 import BaseLayout from "@/layouts/Base";
 
-// 1. Tell Astro which /games/* pages to build
 export function getStaticPaths() {
   return Object.entries(gamesData).map(([age, games]) => ({
-    params: { age }, // matches [age].astro
+    params: { age },
     props: {
       games,
       displayName: getAgeGroupDisplayName(age)
@@ -17,7 +15,6 @@ export function getStaticPaths() {
   }));
 }
 
-// 2. These come from the matching entry in getStaticPaths()
 const { games, displayName } = Astro.props;
 
 const meta = {
@@ -33,6 +30,28 @@ const meta = {
       <h2>Games for {displayName}</h2>
     </div>
 
-    {games.length === 0 ? <p>No games found for this age group.</p> : <GamesGrid games={games} />}
+    <div id="gamesContainer">
+      {games.length === 0 ? <p>No games found for this age group.</p> : <GamesGrid games={games} />}
+    </div>
   </div>
 </BaseLayout>
+
+<style>
+  .games-page {
+    padding: 1rem 0;
+  }
+  .page-header {
+    display: flex;
+    align-items: center;
+    gap: 1rem;
+    padding: 1rem 2rem;
+  }
+  .page-header h2 {
+    font-size: 1.5rem;
+    font-weight: 800;
+    color: #1a3353;
+  }
+  :global([data-theme="dark"]) .page-header h2 {
+    color: #e2f0ff;
+  }
+</style>
diff --git a/src/pages/landing.astro b/src/pages/landing.astro
index 7f409073..27ebbabe 100644
--- a/src/pages/landing.astro
+++ b/src/pages/landing.astro
@@ -1,24 +1,17 @@
 ---
 import "@/assets/styles/landing.css";
-import Categories from "@/components/Categories.astro";
 import Hero from "@/components/Hero.astro";
 ---
 
-<!-- Landing Page -->
 <section id="landingPage" class="container__landing">
   <Hero />
-  <Categories />
 </section>
 
 <script is:inline>
   const btn = document.querySelector("#categoryAnchor");
   const target = document.querySelector("#categories");
 
-  if (!btn || !target) {
-    console.warn("[DEBUG] Button or target NOT found");
-  } else {
-    console.log("[DEBUG] Button & target found, wiring click…");
-
+  if (btn && target) {
     btn.addEventListener("click", () => {
       target.scrollIntoView({
         behavior: "smooth",
@@ -26,6 +19,4 @@ import Hero from "@/components/Hero.astro";
       });
     });
   }
-</script>
-
-
+</script>
\ No newline at end of file
diff --git a/src/pages/math.astro b/src/pages/math.astro
index 72aef999..e35dd141 100644
--- a/src/pages/math.astro
+++ b/src/pages/math.astro
@@ -13,12 +13,26 @@ const meta = {
 
 <BaseLayout meta={meta}>
   <Back />
+
   <Fragment slot="header-right">
-    <SharePopover />
-    <Help
-      title="Basic Arithmetic"
-      description="Practice basic math operations like addition, subtraction, and multiplication."
-    />
+    <div class="math-header-actions">
+      <SharePopover />
+
+      <Help
+        title="Basic Arithmetic"
+        description="Practice basic math operations like addition, subtraction, and multiplication."
+      />
+    </div>
   </Fragment>
+
   <MathPractice />
 </BaseLayout>
+<style>
+  .math-header-actions {
+    display: flex;
+    align-items: center;
+    gap: 4px;
+    transform: scale(0.72);
+    transform-origin: right center;
+  }
+</style>