diff --git a/css/style.css b/css/style.css
index 993a1d6..7e07b2f 100644
--- a/css/style.css
+++ b/css/style.css
@@ -1,1196 +1,1047 @@
 /* =========================================
    GOOGLE FONT
 ========================================= */
-@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');
-
+@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap");
 
 /* =========================================
    RESET
 ========================================= */
 * {
-    margin: 0;
-    padding: 0;
-    box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+/* =========================================
+   VARIABLES
+========================================= */
+
+:root {
+  --primary: #2f6b4f;
+  --primary-dark: #24553e;
+  --primary-light: #e8f3ed;
+  --footer: #17251e;
+
+  --heading: #17251e;
+  --text: #66736c;
+  --white: #ffffff;
+
+  --border: #dfe6e1;
+  --background: #f7f9f7;
+  --surface: #ffffff;
+  --surface-secondary: #eef3ef;
+
+  --input-background: #ffffff;
+  --button-secondary: #edf1ee;
+
+  --tree-line: #b8c9bf;
+  --tree-card: #fbfcfb;
+  --tree-title: #edf5f0;
+
+  --danger: #d9534f;
+
+  --overlay: rgba(10, 20, 15, 0.6);
+
+  --radius: 14px;
+  --shadow: 0 8px 30px rgba(24, 50, 37, 0.08);
+}
+
+[data-theme="dark"] {
+  --primary: #6fa889;
+  --primary-dark: #5b8f72;
+  --primary-light: #1e3027;
+  --footer: #51876c;
+
+  --heading: #e8f0eb;
+  --text: #aebbb3;
+
+  /* Main page background */
+  --background: #0d0f0e;
+
+  /* Main surfaces */
+  --surface: #151817;
+  --surface-secondary: #1b1e1c;
+
+  /* Inputs */
+  --input-background: #171a19;
+
+  /* Secondary buttons */
+  --button-secondary: #242825;
+
+  /* Tree */
+  --tree-line: #3b4540;
+  --tree-card: #181b1a;
+  --tree-title: #1c2821;
+
+  --border: #2c312e;
+
+  --overlay: rgba(0, 0, 0, 0.7);
+
+  --shadow: 0 8px 30px rgba(0, 0, 0, 0.35);
+}
+
+/* =========================================
+     RESET
+  ========================================= */
+
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
 }
 
 html {
-    scroll-behavior: smooth;
+  scroll-behavior: smooth;
 }
 
 body {
-    font-family: "Inter", sans-serif;
-    background: #f7f9f7;
-    color: #1d2b24;
-    line-height: 1.6;
+  font-family: "Inter", sans-serif;
+  background: var(--background);
+  color: var(--text);
+  line-height: 1.6;
 }
 
 button,
 input,
 select,
 textarea {
-    font: inherit;
+  font: inherit;
 }
 
 button {
-    cursor: pointer;
+  cursor: pointer;
 }
 
 a {
-    text-decoration: none;
-    color: inherit;
+  text-decoration: none;
+  color: inherit;
 }
 
 img {
-    max-width: 100%;
-    display: block;
+  max-width: 100%;
+  display: block;
 }
 
-
 /* =========================================
-   VARIABLES
-========================================= */
-:root {
-    --primary: #2f6b4f;
-    --primary-dark: #24553e;
-    --primary-light: #e8f3ed;
-
-    --heading: #17251e;
-    --text: #66736c;
-    --white: #ffffff;
-
-    --border: #dfe6e1;
-    --background: #f7f9f7;
+     GLOBAL
+  ========================================= */
 
-    --danger: #d9534f;
-
-    --radius: 14px;
-    --shadow: 0 8px 30px rgba(24, 50, 37, 0.08);
-}
-
-
-/* =========================================
-   GLOBAL
-========================================= */
 .container {
-    width: min(1180px, calc(100% - 40px));
-    margin: 0 auto;
+  width: min(1180px, calc(100% - 40px));
+  margin: 0 auto;
 }
 
 section {
-    padding: 90px 0;
+  padding: 90px 0;
 }
 
 h1,
 h2,
 h3 {
-    color: var(--heading);
-    line-height: 1.2;
+  color: var(--heading);
+  line-height: 1.2;
 }
 
 .section-label {
-    display: inline-block;
-    color: var(--primary);
-    font-size: 14px;
-    font-weight: 700;
-    text-transform: uppercase;
-    letter-spacing: 1px;
-    margin-bottom: 8px;
+  display: inline-block;
+  color: var(--primary);
+  font-size: 14px;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 1px;
+  margin-bottom: 8px;
 }
 
 .section-header {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    gap: 30px;
-    margin-bottom: 40px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 30px;
+  margin-bottom: 40px;
 }
 
 .section-header h2 {
-    font-size: 36px;
+  font-size: 36px;
 }
 
-
 /* =========================================
-   BUTTONS
-========================================= */
+     BUTTONS
+  ========================================= */
+
 .btn {
-    border: 0;
-    padding: 13px 22px;
-    border-radius: 10px;
-    font-weight: 600;
-    transition: 0.25s ease;
+  border: 0;
+  padding: 13px 22px;
+  border-radius: 10px;
+  font-weight: 600;
+  transition: 0.25s ease;
 }
 
 .btn-primary {
-    background: var(--primary);
-    color: var(--white);
+  background: var(--primary);
+  color: var(--white);
 }
 
 .btn-primary:hover {
-    background: var(--primary-dark);
-    transform: translateY(-2px);
+  background: var(--primary-dark);
+  transform: translateY(-2px);
 }
 
 .btn-secondary {
-    background: #edf1ee;
-    color: var(--heading);
+  background: var(--button-secondary);
+  color: var(--heading);
 }
 
 .btn-secondary:hover {
-    background: #dfe6e1;
+  background: var(--border);
 }
 
+.toggle-theme-btn {
+  padding: 2px 4px;
+}
 
 /* =========================================
-   HEADER
-========================================= */
+     HEADER
+  ========================================= */
+
 .site-header {
-    position: sticky;
-    top: 0;
-    z-index: 100;
-    background: rgba(255, 255, 255, 0.95);
-    border-bottom: 1px solid var(--border);
-    backdrop-filter: blur(12px);
+  position: sticky;
+  top: 0;
+  z-index: 100;
+  background: var(--surface);
+  border-bottom: 1px solid var(--border);
+  backdrop-filter: blur(12px);
 }
 
 .navbar {
-    min-height: 74px;
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    gap: 30px;
+  min-height: 74px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 30px;
 }
 
 .logo {
-    color: var(--primary);
-    font-size: 24px;
-    font-weight: 800;
+  color: var(--primary);
+  font-size: 24px;
+  font-weight: 800;
 }
 
 .nav-links {
-    display: flex;
-    list-style: none;
-    gap: 35px;
+  display: flex;
+  list-style: none;
+  gap: 35px;
 }
 
 .nav-links a {
-    color: var(--text);
-    font-size: 15px;
-    font-weight: 500;
-    transition: 0.2s;
+  color: var(--text);
+  font-size: 15px;
+  font-weight: 500;
+  transition: 0.2s;
 }
 
 .nav-links a:hover {
-    color: var(--primary);
+  color: var(--primary);
 }
 
-
 /* =========================================
-   HERO
-========================================= */
+     HERO
+  ========================================= */
+
 .hero {
-    min-height: 650px;
-    display: flex;
-    align-items: center;
-    background:
-        radial-gradient(circle at 80% 30%, #dceee3 0%, transparent 30%),
-        linear-gradient(135deg, #f7faf8, #edf5f0);
+  min-height: 650px;
+  display: flex;
+  align-items: center;
+
+  background:
+    radial-gradient(
+      circle at 80% 30%,
+      var(--primary-light) 0%,
+      transparent 30%
+    ),
+    linear-gradient(135deg, var(--background), var(--surface-secondary));
 }
 
 .hero-container {
-    display: grid;
-    grid-template-columns: 1fr 1fr;
-    align-items: center;
-    gap: 70px;
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  align-items: center;
+  gap: 70px;
 }
 
 .hero-badge {
-    display: inline-block;
-    padding: 8px 14px;
-    border-radius: 30px;
-    background: var(--primary-light);
-    color: var(--primary);
-    font-size: 13px;
-    font-weight: 700;
-    margin-bottom: 20px;
+  display: inline-block;
+  padding: 8px 14px;
+  border-radius: 30px;
+  background: var(--primary-light);
+  color: var(--primary);
+  font-size: 13px;
+  font-weight: 700;
+  margin-bottom: 20px;
 }
 
 .hero-content h1 {
-    max-width: 650px;
-    font-size: clamp(42px, 5vw, 68px);
-    margin-bottom: 22px;
+  max-width: 650px;
+  font-size: clamp(42px, 5vw, 68px);
+  margin-bottom: 22px;
 }
 
 .hero-content p {
-    max-width: 560px;
-    color: var(--text);
-    font-size: 18px;
-    margin-bottom: 30px;
+  max-width: 560px;
+  color: var(--text);
+  font-size: 18px;
+  margin-bottom: 30px;
 }
 
 .hero-image {
-    display: flex;
-    justify-content: center;
+  display: flex;
+  justify-content: center;
 }
 
 .hero-placeholder {
-    width: 100%;
-    max-width: 500px;
-    min-height: 400px;
-    border-radius: 30px;
-    background: var(--white);
-    border: 1px solid var(--border);
-    box-shadow: var(--shadow);
+  width: 100%;
+  max-width: 500px;
+  min-height: 400px;
+  border-radius: 30px;
+  background: var(--surface);
+  border: 1px solid var(--border);
+  box-shadow: var(--shadow);
 
-    display: flex;
-    align-items: center;
-    justify-content: center;
+  display: flex;
+  align-items: center;
+  justify-content: center;
 
-    color: var(--primary);
-    font-size: 22px;
-    font-weight: 700;
+  color: var(--primary);
+  font-size: 22px;
+  font-weight: 700;
 }
 
-
 /* =========================================
-   FAMILY STATS
-========================================= */
+     FAMILY STATS
+  ========================================= */
+
 .family-stats {
-    padding: 0;
-    position: relative;
-    margin-top: -45px;
-    z-index: 5;
+  padding: 0;
+  position: relative;
+  margin-top: -45px;
+  z-index: 5;
 }
 
 .stats-container {
-    display: grid;
-    grid-template-columns: repeat(4, 1fr);
-    background: var(--white);
-    border: 1px solid var(--border);
-    border-radius: 20px;
-    box-shadow: var(--shadow);
-    overflow: hidden;
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  background: var(--surface);
+  border: 1px solid var(--border);
+  border-radius: 20px;
+  box-shadow: var(--shadow);
+  overflow: hidden;
 }
 
 .stat-card {
-    text-align: center;
-    padding: 30px 20px;
-    border-right: 1px solid var(--border);
+  text-align: center;
+  padding: 30px 20px;
+  border-right: 1px solid var(--border);
 }
 
 .stat-card:last-child {
-    border-right: none;
+  border-right: none;
 }
 
 .stat-card h3 {
-    color: var(--primary);
-    font-size: 32px;
-    margin-bottom: 5px;
+  color: var(--primary);
+  font-size: 32px;
+  margin-bottom: 5px;
 }
 
 .stat-card p {
-    color: var(--text);
-    font-size: 14px;
+  color: var(--text);
+  font-size: 14px;
 }
 
-
 /* =========================================
-   FAMILY TREE
-========================================= */
+     FAMILY TREE
+  ========================================= */
+
 .family-tree-section {
-    padding-top: 130px;
+  padding-top: 130px;
 }
 
 .tree-actions {
-    display: flex;
-    gap: 12px;
+  display: flex;
+  gap: 12px;
 }
 
 .tree-actions input,
 .member-filters input,
 .member-filters select {
-    height: 46px;
-    border: 1px solid var(--border);
-    background: var(--white);
-    border-radius: 10px;
-    padding: 0 15px;
-    outline: none;
-    color: var(--heading);
+  height: 46px;
+  border: 1px solid var(--border);
+  background: var(--input-background);
+  border-radius: 10px;
+  padding: 0 15px;
+  outline: none;
+  color: var(--heading);
 }
 
 .tree-actions input {
-    width: 260px;
+  width: 260px;
 }
 
 .tree-actions input:focus,
 .member-filters input:focus,
 .member-filters select:focus {
-    border-color: var(--primary);
+  border-color: var(--primary);
 }
 
 .tree-wrapper {
-    background: var(--white);
-    border: 1px solid var(--border);
-    border-radius: 20px;
-    padding: 45px;
-    box-shadow: var(--shadow);
-    overflow-x: auto;
+  background: var(--surface);
+  border: 1px solid var(--border);
+  border-radius: 20px;
+  padding: 45px;
+  box-shadow: var(--shadow);
+  overflow-x: auto;
 }
 
 .tree-generation {
-    position: relative;
-    margin-bottom: 65px;
+  position: relative;
+  margin-bottom: 65px;
 }
 
 .tree-generation:last-child {
-    margin-bottom: 0;
+  margin-bottom: 0;
 }
 
 .generation-title {
-    color: var(--text);
-    font-size: 13px;
-    text-transform: uppercase;
-    letter-spacing: 1px;
-    text-align: center;
-    margin-bottom: 25px;
+  color: var(--text);
+  font-size: 13px;
+  text-transform: uppercase;
+  letter-spacing: 1px;
+  text-align: center;
+  margin-bottom: 25px;
 }
 
 .generation-members {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    flex-wrap: wrap;
-    gap: 25px;
-    min-height: 80px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-wrap: wrap;
+  gap: 25px;
+  min-height: 80px;
 }
 
-
 /* =========================================
-   DYNAMIC TREE MEMBER CARD
-========================================= */
+     TREE MEMBER
+  ========================================= */
+
 .tree-member {
-    width: 180px;
-    padding: 20px;
-    text-align: center;
-    background: #fbfcfb;
-    border: 1px solid var(--border);
-    border-radius: 15px;
-    transition: 0.25s;
-    position: relative;
+  width: 180px;
+  padding: 20px;
+  text-align: center;
+  background: var(--tree-card);
+  border: 1px solid var(--border);
+  border-radius: 15px;
+  transition: 0.25s;
+  position: relative;
 }
 
 .tree-member:hover {
-    border-color: var(--primary);
-    transform: translateY(-4px);
-    box-shadow: var(--shadow);
+  border-color: var(--primary);
+  transform: translateY(-4px);
+  box-shadow: var(--shadow);
 }
 
 .tree-member img {
-    width: 65px;
-    height: 65px;
-    margin: 0 auto 12px;
-    border-radius: 50%;
-    object-fit: cover;
+  width: 65px;
+  height: 65px;
+  margin: 0 auto 12px;
+  border-radius: 50%;
+  object-fit: cover;
 }
 
 .tree-member h4 {
-    font-size: 15px;
-    color: var(--heading);
-    margin-bottom: 4px;
+  font-size: 15px;
+  color: var(--heading);
+  margin-bottom: 4px;
 }
 
 .tree-member span {
-    color: var(--primary);
-    font-size: 12px;
-    font-weight: 600;
+  color: var(--primary);
+  font-size: 12px;
+  font-weight: 600;
 }
 
-
 /* =========================================
-   FAMILY MEMBERS
-========================================= */
+     FAMILY MEMBERS
+  ========================================= */
+
 .family-members-section {
-    background: #eef3ef;
+  background: var(--surface-secondary);
 }
 
 .member-filters {
-    display: flex;
-    gap: 15px;
-    margin-bottom: 30px;
+  display: flex;
+  gap: 15px;
+  margin-bottom: 30px;
 }
 
 .member-filters input {
-    flex: 1;
+  flex: 1;
 }
 
 .member-filters select {
-    width: 220px;
+  width: 220px;
 }
 
 .members-grid {
-    display: grid;
-    grid-template-columns: repeat(3, 1fr);
-    gap: 25px;
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 25px;
 }
 
-
 /* =========================================
-   DYNAMIC MEMBER CARD
-========================================= */
+     MEMBER CARD
+  ========================================= */
+
 .member-card {
-    background: var(--white);
-    border: 1px solid var(--border);
-    border-radius: var(--radius);
-    padding: 25px;
-    box-shadow: 0 4px 18px rgba(20, 45, 30, 0.04);
-    transition: 0.25s;
+  background: var(--surface);
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  padding: 25px;
+
+  box-shadow: 0 4px 18px rgba(20, 45, 30, 0.04);
+
+  transition: 0.25s;
 }
 
 .member-card:hover {
-    transform: translateY(-5px);
-    box-shadow: var(--shadow);
+  transform: translateY(-5px);
+  box-shadow: var(--shadow);
 }
 
 .member-card-header {
-    display: flex;
-    align-items: center;
-    gap: 15px;
-    margin-bottom: 20px;
+  display: flex;
+  align-items: center;
+  gap: 15px;
+  margin-bottom: 20px;
 }
 
 .member-card img {
-    width: 65px;
-    height: 65px;
-    border-radius: 50%;
-    object-fit: cover;
-    background: var(--primary-light);
+  width: 65px;
+  height: 65px;
+  border-radius: 50%;
+  object-fit: cover;
+  background: var(--primary-light);
 }
 
 .member-card h3 {
-    font-size: 18px;
-    margin-bottom: 4px;
+  font-size: 18px;
+  margin-bottom: 4px;
 }
 
 .relationship {
-    color: var(--primary);
-    font-size: 13px;
-    font-weight: 600;
+  color: var(--primary);
+  font-size: 13px;
+  font-weight: 600;
 }
 
 .member-meta {
-    color: var(--text);
-    font-size: 14px;
-    margin-bottom: 20px;
+  color: var(--text);
+  font-size: 14px;
+  margin-bottom: 20px;
 }
 
 .member-card-actions {
-    display: flex;
-    gap: 8px;
+  display: flex;
+  gap: 8px;
 }
 
 .member-card-actions button {
-    flex: 1;
-    padding: 9px;
-    border-radius: 8px;
-    border: 1px solid var(--border);
-    background: var(--white);
-    font-size: 13px;
+  flex: 1;
+  padding: 9px;
+  border-radius: 8px;
+  border: 1px solid var(--border);
+  background: var(--surface);
+  color: var(--heading);
+  font-size: 13px;
 }
 
 .member-card-actions button:hover {
-    border-color: var(--primary);
-    color: var(--primary);
+  border-color: var(--primary);
+  color: var(--primary);
 }
 
 .member-card-actions .delete-btn:hover {
-    border-color: var(--danger);
-    color: var(--danger);
+  border-color: var(--danger);
+  color: var(--danger);
 }
 
-
 /* =========================================
-   EMPTY MEMBERS
-========================================= */
+     EMPTY MEMBERS
+  ========================================= */
+
 .empty-members-message {
-    grid-column: 1 / -1;
-    padding: 70px 20px;
-    text-align: center;
-    background: var(--white);
-    border: 1px dashed #bdc9c1;
-    border-radius: 16px;
+  grid-column: 1 / -1;
+  padding: 70px 20px;
+  text-align: center;
+  background: var(--surface);
+  border: 1px dashed var(--border);
+  border-radius: 16px;
 }
 
 .empty-members-message h3 {
-    font-size: 22px;
-    margin-bottom: 8px;
+  font-size: 22px;
+  margin-bottom: 8px;
 }
 
 .empty-members-message p {
-    color: var(--text);
-    margin-bottom: 20px;
+  color: var(--text);
+  margin-bottom: 20px;
 }
 
-
 /* =========================================
-   MODAL
-========================================= */
-.modal {
-    position: fixed;
-    inset: 0;
-    z-index: 500;
-
-    display: none;
-    align-items: center;
-    justify-content: center;
+     MODAL
+  ========================================= */
 
-    padding: 20px;
+.modal {
+  position: fixed;
+  inset: 0;
+  z-index: 500;
+  display: none;
+  align-items: center;
+  justify-content: center;
+  padding: 20px;
 }
 
 .modal.active {
-    display: flex;
+  display: flex;
 }
 
 .modal-overlay {
-    position: absolute;
-    inset: 0;
-    background: rgba(10, 20, 15, 0.6);
-    backdrop-filter: blur(3px);
+  position: absolute;
+  inset: 0;
+  background: var(--overlay);
+  backdrop-filter: blur(3px);
 }
 
 .modal-content {
-    width: min(580px, 100%);
-    max-height: 90vh;
-    overflow-y: auto;
+  width: min(580px, 100%);
+  max-height: 90vh;
+  overflow-y: auto;
+  position: relative;
+  z-index: 2;
 
-    position: relative;
-    z-index: 2;
-
-    background: var(--white);
-    border-radius: 20px;
-    padding: 35px;
-    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.2);
+  background: var(--surface);
+  border-radius: 20px;
+  padding: 35px;
+  box-shadow: var(--shadow);
 }
 
 .modal-close {
-    position: absolute;
-    top: 18px;
-    right: 20px;
+  position: absolute;
+  top: 18px;
+  right: 20px;
 
-    width: 36px;
-    height: 36px;
+  width: 36px;
+  height: 36px;
 
-    border: 0;
-    border-radius: 50%;
+  border: 0;
+  border-radius: 50%;
 
-    background: #eef2ef;
-    color: var(--heading);
+  background: var(--button-secondary);
+  color: var(--heading);
 
-    font-size: 24px;
-    line-height: 1;
+  font-size: 24px;
+  line-height: 1;
 }
 
 .modal-header {
-    margin-bottom: 28px;
+  margin-bottom: 28px;
 }
 
 .modal-header h2 {
-    font-size: 28px;
-    margin-bottom: 6px;
+  font-size: 28px;
+  margin-bottom: 6px;
 }
 
 .modal-header p {
-    color: var(--text);
+  color: var(--text);
 }
 
-
 /* =========================================
-   FORM
-========================================= */
+     FORM
+  ========================================= */
+
 .form-group {
-    margin-bottom: 18px;
+  margin-bottom: 18px;
 }
 
 .form-group label {
-    display: block;
-    color: var(--heading);
-    font-size: 14px;
-    font-weight: 600;
-    margin-bottom: 7px;
+  display: block;
+  color: var(--heading);
+  font-size: 14px;
+  font-weight: 600;
+  margin-bottom: 7px;
 }
 
 .form-group input,
 .form-group select,
 .form-group textarea {
-    width: 100%;
-    border: 1px solid var(--border);
-    border-radius: 9px;
-    padding: 12px 14px;
-    background: var(--white);
-    color: var(--heading);
-    outline: none;
+  width: 100%;
+  border: 1px solid var(--border);
+  border-radius: 9px;
+  padding: 12px 14px;
+
+  background: var(--input-background);
+  color: var(--heading);
+
+  outline: none;
 }
 
 .form-group input:focus,
 .form-group select:focus,
 .form-group textarea:focus {
-    border-color: var(--primary);
+  border-color: var(--primary);
 }
 
 .form-group textarea {
-    resize: vertical;
+  resize: vertical;
 }
 
 .form-actions {
-    display: flex;
-    justify-content: flex-end;
-    gap: 10px;
-    margin-top: 28px;
+  display: flex;
+  justify-content: flex-end;
+  gap: 10px;
+  margin-top: 28px;
 }
 
-
 /* =========================================
-   MEMBER DETAILS MODAL
-========================================= */
+     MEMBER DETAILS MODAL
+  ========================================= */
+
 .details-profile {
-    text-align: center;
-    padding: 15px 0 30px;
-    border-bottom: 1px solid var(--border);
+  text-align: center;
+  padding: 15px 0 30px;
+  border-bottom: 1px solid var(--border);
 }
 
 .details-image img {
-    width: 110px;
-    height: 110px;
-    object-fit: cover;
-    border-radius: 50%;
-    margin: 0 auto 15px;
-    background: var(--primary-light);
+  width: 110px;
+  height: 110px;
+  object-fit: cover;
+  border-radius: 50%;
+  margin: 0 auto 15px;
+  background: var(--primary-light);
 }
 
 .details-profile h2 {
-    font-size: 25px;
-    margin-bottom: 5px;
+  font-size: 25px;
+  margin-bottom: 5px;
 }
 
 .details-profile span {
-    display: inline-block;
-    background: var(--primary-light);
-    color: var(--primary);
-    padding: 5px 12px;
-    border-radius: 30px;
-    font-size: 12px;
-    font-weight: 600;
+  display: inline-block;
+  background: var(--primary-light);
+  color: var(--primary);
+
+  padding: 5px 12px;
+  border-radius: 30px;
+
+  font-size: 12px;
+  font-weight: 600;
 }
 
 .details-information {
-    padding-top: 25px;
+  padding-top: 25px;
 }
 
 .detail-item {
-    margin-bottom: 18px;
+  margin-bottom: 18px;
 }
 
 .detail-item strong {
-    display: block;
-    font-size: 13px;
-    color: var(--text);
-    margin-bottom: 4px;
+  display: block;
+  font-size: 13px;
+  color: var(--text);
+  margin-bottom: 4px;
 }
 
 .detail-item span,
 .detail-item p {
-    color: var(--heading);
+  color: var(--heading);
 }
 
-
 /* =========================================
-   FOOTER
-========================================= */
+     FOOTER
+  ========================================= */
+
 .site-footer {
-    background: #17251e;
-    color: #c6d0ca;
+  background: var(--footer);
+  color: var(--text);
 }
 
 .footer-container {
-    padding: 60px 0;
-    display: flex;
-    justify-content: space-between;
-    gap: 50px;
+  padding: 60px 0;
+  display: flex;
+  justify-content: space-between;
+  gap: 50px;
 }
 
 .footer-brand {
-    max-width: 430px;
+  max-width: 430px;
 }
 
 .footer-brand .logo {
-    display: inline-block;
-    color: var(--white);
-    margin-bottom: 12px;
+  display: inline-block;
+  color: var(--white);
+  margin-bottom: 12px;
 }
 
 .footer-brand p {
-    font-size: 14px;
+  font-size: 14px;
 }
 
 .footer-links {
-    display: flex;
-    align-items: flex-start;
-    gap: 30px;
+  display: flex;
+  align-items: flex-start;
+  gap: 30px;
 }
 
 .footer-links a {
-    transition: 0.2s;
+  transition: 0.2s;
 }
 
 .footer-links a:hover {
-    color: var(--white);
+  color: var(--white);
 }
 
 .footer-bottom {
-    border-top: 1px solid rgba(255, 255, 255, 0.1);
-    padding: 20px 0;
-    text-align: center;
-    font-size: 13px;
-}
-
-
-/* =========================================
-   RESPONSIVE - TABLET
-========================================= */
-@media (max-width: 900px) {
-
-    .hero-container {
-        grid-template-columns: 1fr;
-        text-align: center;
-    }
-
-    .hero-content p {
-        margin-left: auto;
-        margin-right: auto;
-    }
-
-    .stats-container {
-        grid-template-columns: repeat(2, 1fr);
-    }
-
-    .stat-card:nth-child(2) {
-        border-right: none;
-    }
-
-    .stat-card:nth-child(-n+2) {
-        border-bottom: 1px solid var(--border);
-    }
-
-    .members-grid {
-        grid-template-columns: repeat(2, 1fr);
-    }
-
-    .section-header {
-        align-items: flex-start;
-        flex-direction: column;
-    }
-
-    .tree-actions {
-        width: 100%;
-    }
-
-    .tree-actions input {
-        flex: 1;
-        width: auto;
-    }
+  border-top: 1px solid var(--border);
+  padding: 20px 0;
+  text-align: center;
+  font-size: 13px;
 }
 
-
 /* =========================================
-   RESPONSIVE - MOBILE
-========================================= */
-@media (max-width: 650px) {
-
-    .container {
-        width: min(100% - 28px, 1180px);
-    }
-
-    section {
-        padding: 65px 0;
-    }
-
-    .navbar {
-        min-height: 65px;
-    }
-
-    .nav-links {
-        display: none;
-    }
-
-    .navbar .btn {
-        padding: 10px 13px;
-        font-size: 12px;
-    }
-
-    .hero {
-        min-height: auto;
-        padding: 80px 0 110px;
-    }
-
-    .hero-container {
-        gap: 45px;
-    }
-
-    .hero-content h1 {
-        font-size: 40px;
-    }
-
-    .hero-content p {
-        font-size: 16px;
-    }
-
-    .hero-placeholder {
-        min-height: 280px;
-    }
-
-    .family-stats {
-        margin-top: -50px;
-    }
-
-    .stats-container {
-        grid-template-columns: 1fr 1fr;
-    }
-
-    .stat-card {
-        padding: 22px 10px;
-    }
-
-    .stat-card h3 {
-        font-size: 25px;
-    }
-
-    .family-tree-section {
-        padding-top: 100px;
-    }
-
-    .section-header h2 {
-        font-size: 30px;
-    }
-
-    .tree-actions {
-        flex-direction: column;
-    }
-
-    .tree-actions input {
-        width: 100%;
-    }
-
-    .tree-wrapper {
-        padding: 25px 15px;
-    }
-
-    .member-filters {
-        flex-direction: column;
-    }
-
-    .member-filters select {
-        width: 100%;
-    }
-
-    .members-grid {
-        grid-template-columns: 1fr;
-    }
-
-    .modal-content {
-        padding: 30px 20px;
-    }
-
-    .form-actions {
-        flex-direction: column-reverse;
-    }
-
-    .form-actions .btn {
-        width: 100%;
-    }
-
-    .footer-container {
-        flex-direction: column;
-        padding: 45px 0;
-    }
-
-    .footer-links {
-        flex-wrap: wrap;
-    }
-}
-
-
-
-
-
-
-
-
-/* =========================================
-   CONNECTED FAMILY TREE
-========================================= */
+     CONNECTED FAMILY TREE
+  ========================================= */
 
 .tree-wrapper {
-    position: relative;
-    padding: 55px 35px;
+  position: relative;
+  padding: 55px 35px;
 }
 
-/* Each generation */
-
 .tree-generation {
-    position: relative;
-    margin-bottom: 90px;
+  position: relative;
+  margin-bottom: 90px;
 }
 
 .tree-generation:last-child {
-    margin-bottom: 0;
+  margin-bottom: 0;
 }
 
-
-/* Generation members */
-
 .generation-members {
-    position: relative;
-    display: flex;
-    justify-content: center;
-    align-items: flex-start;
-    gap: 35px;
+  position: relative;
+  display: flex;
+  justify-content: center;
+  align-items: flex-start;
+  gap: 35px;
 }
 
-
 /* =========================================
-   VERTICAL GENERATION CONNECTION
-========================================= */
+     VERTICAL GENERATION CONNECTION
+  ========================================= */
 
 .tree-generation:not(:last-child)::after {
-    content: "";
-    position: absolute;
+  content: "";
 
-    width: 2px;
-    height: 55px;
+  position: absolute;
+  width: 2px;
+  height: 55px;
 
-    background: #b8c9bf;
+  background: var(--tree-line);
 
-    left: 50%;
-    bottom: -72px;
+  left: 50%;
+  bottom: -72px;
 
-    transform: translateX(-50%);
+  transform: translateX(-50%);
 }
 
-
 /* =========================================
-   HORIZONTAL CONNECTION LINE
-========================================= */
+     HORIZONTAL CONNECTION LINE
+  ========================================= */
 
 .generation-members::before {
-    content: "";
-    position: absolute;
+  content: "";
 
-    height: 2px;
+  position: absolute;
+  height: 2px;
 
-    background: #b8c9bf;
+  background: var(--tree-line);
 
-    top: -16px;
-
-    left: 15%;
-    right: 15%;
+  top: -16px;
+  left: 15%;
+  right: 15%;
 }
 
-
-/* Don't show horizontal line
-   when generation is empty */
-
 .generation-members:has(p)::before {
-    display: none;
+  display: none;
 }
 
-
 /* =========================================
-   TREE MEMBER
-========================================= */
+     TREE MEMBER
+  ========================================= */
 
 .tree-member {
-    position: relative;
-
-    width: 190px;
+  position: relative;
 
-    padding: 22px 15px;
+  width: 190px;
+  padding: 22px 15px;
 
-    background: #ffffff;
+  background: var(--tree-card);
+  border: 1px solid var(--border);
 
-    border: 1px solid #dfe6e1;
+  border-radius: 16px;
+  text-align: center;
 
-    border-radius: 16px;
+  cursor: pointer;
 
-    text-align: center;
+  transition:
+    transform 0.25s ease,
+    box-shadow 0.25s ease,
+    border-color 0.25s ease;
 
-    cursor: pointer;
-
-    transition:
-        transform 0.25s ease,
-        box-shadow 0.25s ease,
-        border-color 0.25s ease;
-
-    z-index: 2;
+  z-index: 2;
 }
 
-
-/* Line from horizontal connector
-   to member */
+/* Line from horizontal connector to member */
 
 .tree-member::before {
-    content: "";
+  content: "";
 
-    position: absolute;
+  position: absolute;
+  width: 2px;
+  height: 17px;
 
-    width: 2px;
-    height: 17px;
+  background: var(--tree-line);
 
-    background: #b8c9bf;
+  top: -17px;
+  left: 50%;
 
-    top: -17px;
-
-    left: 50%;
-
-    transform: translateX(-50%);
+  transform: translateX(-50%);
 }
 
-
 .tree-member:hover {
-    transform: translateY(-6px);
-
-    border-color: var(--primary);
-
-    box-shadow:
-        0 12px 35px
-        rgba(35, 80, 55, 0.12);
+  transform: translateY(-6px);
+  border-color: var(--primary);
+  box-shadow: var(--shadow);
 }
 
-
 /* =========================================
-   PROFILE IMAGE
-========================================= */
+     PROFILE IMAGE
+  ========================================= */
 
 .tree-member img {
-    width: 72px;
-    height: 72px;
-
-    border-radius: 50%;
+  width: 72px;
+  height: 72px;
 
-    object-fit: cover;
+  border-radius: 50%;
+  object-fit: cover;
 
-    margin: 0 auto 13px;
+  margin: 0 auto 13px;
 
-    border: 4px solid #e8f3ed;
+  border: 4px solid var(--primary-light);
 }
 
-
 /* =========================================
-   NAME
-========================================= */
+     NAME
+  ========================================= */
 
 .tree-member h4 {
-    font-size: 15px;
-
-    color: var(--heading);
-
-    margin-bottom: 5px;
+  font-size: 15px;
+  color: var(--heading);
 
-    white-space: nowrap;
+  margin-bottom: 5px;
 
-    overflow: hidden;
-
-    text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
 
-
 /* =========================================
-   RELATIONSHIP BADGE
-========================================= */
+     RELATIONSHIP BADGE
+  ========================================= */
 
 .tree-member span {
-    display: inline-block;
+  display: inline-block;
 
-    padding: 4px 10px;
+  padding: 4px 10px;
 
-    background: var(--primary-light);
+  background: var(--primary-light);
+  color: var(--primary);
 
-    color: var(--primary);
+  border-radius: 20px;
 
-    border-radius: 20px;
-
-    font-size: 11px;
-
-    font-weight: 600;
+  font-size: 11px;
+  font-weight: 600;
 }
 
-
 /* =========================================
-   GENERATION TITLE
-========================================= */
+     GENERATION TITLE
+  ========================================= */
 
 .generation-title {
-    position: relative;
-
-    width: fit-content;
-
-    margin: 0 auto 40px;
+  position: relative;
 
-    padding: 7px 14px;
+  width: fit-content;
+  margin: 0 auto 40px;
 
-    background: #edf5f0;
+  padding: 7px 14px;
 
-    color: var(--primary);
+  background: var(--tree-title);
+  color: var(--primary);
 
-    border-radius: 20px;
+  border-radius: 20px;
 
-    font-size: 11px;
+  font-size: 11px;
+  font-weight: 700;
 
-    font-weight: 700;
+  letter-spacing: 1px;
+  text-transform: uppercase;
 
-    letter-spacing: 1px;
-
-    text-transform: uppercase;
-
-    z-index: 3;
+  z-index: 3;
 }
 
-
 /* =========================================
-   TREE SEARCH RESULT
-========================================= */
+     TREE SEARCH RESULT
+  ========================================= */
 
 .tree-member.tree-highlight {
-    border: 2px solid var(--primary);
+  border: 2px solid var(--primary);
 
-    box-shadow:
-        0 0 0 5px
-        rgba(47, 107, 79, 0.10);
+  box-shadow: 0 0 0 5px var(--primary-light);
 }
 
-
 /* =========================================
    MOBILE
 ========================================= */
 
 @media (max-width: 650px) {
+  .tree-wrapper {
+    padding: 40px 15px;
+    overflow-x: auto;
+  }
 
-    .tree-wrapper {
-        padding: 40px 15px;
-        overflow-x: auto;
-    }
-
-    .generation-members {
-        min-width: max-content;
-        gap: 20px;
-        padding: 0 20px;
-    }
-
-    .tree-member {
-        width: 155px;
-    }
+  .generation-members {
+    min-width: max-content;
+    gap: 20px;
+    padding: 0 20px;
+  }
 
-    .tree-member img {
-        width: 60px;
-        height: 60px;
-    }
+  .tree-member {
+    width: 155px;
+  }
 
-}
\ No newline at end of file
+  .tree-member img {
+    width: 60px;
+    height: 60px;
+  }
+}
diff --git a/index.html b/index.html
index 5f48e13..3683704 100644
--- a/index.html
+++ b/index.html
@@ -1,588 +1,422 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+<!doctype html>
+<html lang="en" data-theme="light">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 
     <title>FamilyTree | Build Your Family Story</title>
 
     <!-- CSS -->
-    <link rel="stylesheet" href="css/style.css">
-</head>
-
-<body>
+    <link rel="stylesheet" href="css/style.css" />
+  </head>
 
+  <body>
     <!-- ========================================
          HEADER / NAVBAR
     ========================================= -->
     <header class="site-header">
-        <nav class="navbar container">
-
-            <a href="#home" class="logo">
-                FamilyTree
-            </a>
-
-            <ul class="nav-links">
-                <li><a href="#home">Home</a></li>
-                <li><a href="#family-tree">My Tree</a></li>
-                <li><a href="#members">Members</a></li>
-            </ul>
-
-            <button class="btn btn-primary add-member-btn">
-                + Add Member
-            </button>
-
-        </nav>
+      <nav class="navbar container">
+        <a href="#home" class="logo"> FamilyTree </a>
+
+        <ul class="nav-links">
+          <li><a href="#home">Home</a></li>
+          <li><a href="#family-tree">My Tree</a></li>
+          <li><a href="#members">Members</a></li>
+        </ul>
+        <button
+          title="Switch theme"
+          class="btn btn-primary toggle-theme-btn"
+          onclick="toggleTheme()"
+        >
+          🌙
+        </button>
+        <button class="btn btn-primary add-member-btn">+ Add Member</button>
+      </nav>
     </header>
 
-
     <!-- ========================================
          MAIN CONTENT
     ========================================= -->
     <main>
-
-        <!-- ====================================
+      <!-- ====================================
              HERO SECTION
         ===================================== -->
-        <section class="hero" id="home">
+      <section class="hero" id="home">
+        <div class="container hero-container">
+          <div class="hero-content">
+            <span class="hero-badge"> Your Family. Your Story. </span>
 
-            <div class="container hero-container">
+            <h1>Build & Preserve Your Family Tree</h1>
 
-                <div class="hero-content">
-
-                    <span class="hero-badge">
-                        Your Family. Your Story.
-                    </span>
-
-                    <h1>
-                        Build & Preserve Your Family Tree
-                    </h1>
-
-                    <p>
-                        Discover, organize, and preserve your family's story
-                        in one beautiful and interactive family tree.
-                    </p>
-
-                    <button class="btn btn-primary build-tree-btn">
-                        Build My Tree
-                    </button>
-
-                </div>
-
-                <div class="hero-image">
-                    <!-- Family tree illustration will go here -->
-                    <div class="hero-placeholder">
-                 <img src="assets/family-tree-preview.png" alt="family-tree-preview" />
-                    </div>
-                </div>
+            <p>
+              Discover, organize, and preserve your family's story in one
+              beautiful and interactive family tree.
+            </p>
 
+            <button class="btn btn-primary build-tree-btn">
+              Build My Tree
+            </button>
+          </div>
+
+          <div class="hero-image">
+            <!-- Family tree illustration will go here -->
+            <div class="hero-placeholder">
+              <img
+                src="assets/family-tree-preview.png"
+                alt="family-tree-preview"
+              />
             </div>
+          </div>
+        </div>
+      </section>
 
-        </section>
-
-
-        <!-- ====================================
+      <!-- ====================================
              FAMILY STATS
         ===================================== -->
-        <section class="family-stats">
-
-            <div class="container stats-container">
-
-                <div class="stat-card">
-                    <h3 id="total-members">0</h3>
-                    <p>Total Members</p>
-                </div>
-
-                <div class="stat-card">
-                    <h3 id="total-generations">0</h3>
-                    <p>Generations</p>
-                </div>
-
-                <div class="stat-card">
-                    <h3 id="total-branches">0</h3>
-                    <p>Family Branches</p>
-                </div>
-
-                <div class="stat-card">
-                    <h3 id="oldest-generation">--</h3>
-                    <p>Oldest Generation</p>
-                </div>
-
-            </div>
-
-        </section>
-
+      <section class="family-stats">
+        <div class="container stats-container">
+          <div class="stat-card">
+            <h3 id="total-members">0</h3>
+            <p>Total Members</p>
+          </div>
+
+          <div class="stat-card">
+            <h3 id="total-generations">0</h3>
+            <p>Generations</p>
+          </div>
+
+          <div class="stat-card">
+            <h3 id="total-branches">0</h3>
+            <p>Family Branches</p>
+          </div>
+
+          <div class="stat-card">
+            <h3 id="oldest-generation">--</h3>
+            <p>Oldest Generation</p>
+          </div>
+        </div>
+      </section>
 
-        <!-- ====================================
+      <!-- ====================================
              MY FAMILY TREE
         ===================================== -->
-        <section class="family-tree-section" id="family-tree">
-
-            <div class="container">
-
-                <!-- Section Header -->
-                <div class="section-header">
-
-                    <div>
-                        <span class="section-label">Family Connections</span>
-                        <h2>My Family Tree</h2>
-                    </div>
-
-                    <div class="tree-actions">
-
-                        <input
-                            type="search"
-                            id="tree-search"
-                            placeholder="Search family member..."
-                            aria-label="Search family member"
-                        >
-
-                        <button class="btn btn-primary add-member-btn">
-                            + Add Member
-                        </button>
-
-                    </div>
-
-                </div>
-
-
-                <!-- Interactive Family Tree -->
-                <div class="tree-wrapper" id="tree-container">
-
-                    <!-- Grandparents -->
-                    <div class="tree-generation grandparents">
-
-                        <h3 class="generation-title">
-                            Grandparents
-                        </h3>
-
-                        <div class="generation-members">
-                            <!-- Generated dynamically with JavaScript -->
-                        </div>
-
-                    </div>
-
-
-                    <!-- Parents -->
-                    <div class="tree-generation parents">
-
-                        <h3 class="generation-title">
-                            Parents
-                        </h3>
-
-                        <div class="generation-members">
-                            <!-- Generated dynamically with JavaScript -->
-                        </div>
-
-                    </div>
-
+      <section class="family-tree-section" id="family-tree">
+        <div class="container">
+          <!-- Section Header -->
+          <div class="section-header">
+            <div>
+              <span class="section-label">Family Connections</span>
+              <h2>My Family Tree</h2>
+            </div>
 
-                    <!-- Children -->
-                    <div class="tree-generation children">
+            <div class="tree-actions">
+              <input
+                type="search"
+                id="tree-search"
+                placeholder="Search family member..."
+                aria-label="Search family member"
+              />
 
-                        <h3 class="generation-title">
-                            Children
-                        </h3>
+              <button class="btn btn-primary add-member-btn">
+                + Add Member
+              </button>
+            </div>
+          </div>
 
-                        <div class="generation-members">
-                            <!-- Generated dynamically with JavaScript -->
-                        </div>
+          <!-- Interactive Family Tree -->
+          <div class="tree-wrapper" id="tree-container">
+            <!-- Grandparents -->
+            <div class="tree-generation grandparents">
+              <h3 class="generation-title">Grandparents</h3>
 
-                    </div>
+              <div class="generation-members">
+                <!-- Generated dynamically with JavaScript -->
+              </div>
+            </div>
 
-                </div>
+            <!-- Parents -->
+            <div class="tree-generation parents">
+              <h3 class="generation-title">Parents</h3>
 
+              <div class="generation-members">
+                <!-- Generated dynamically with JavaScript -->
+              </div>
             </div>
 
-        </section>
+            <!-- Children -->
+            <div class="tree-generation children">
+              <h3 class="generation-title">Children</h3>
 
+              <div class="generation-members">
+                <!-- Generated dynamically with JavaScript -->
+              </div>
+            </div>
+          </div>
+        </div>
+      </section>
 
-        <!-- ====================================
+      <!-- ====================================
              FAMILY MEMBERS
         ===================================== -->
-        <section class="family-members-section" id="members">
-
-            <div class="container">
-
-                <div class="section-header">
-
-                    <div>
-                        <span class="section-label">Our Family</span>
-                        <h2>Family Members</h2>
-                    </div>
-
-                    <button class="btn btn-primary add-member-btn">
-                        + Add Member
-                    </button>
-
-                </div>
-
-
-                <!-- Member Filters -->
-                <div class="member-filters">
-
-                    <input
-                        type="search"
-                        id="member-search"
-                        placeholder="Search members..."
-                        aria-label="Search members"
-                    >
-
-                    <select id="family-sort">
-                        <option value="default">
-                            Default
-                        </option>
-                        <option value="name-asc">Name (A-Z)</option>
-                        <option value="name-dsc">Name (Z-A)</option>
-                        <option value="age-oldest">Age (Oldest First)</option>
-                        <option value="age-youngest">Age (Youngest First)</option>
-                        <option value="recently-added">Recently Added</option>
-                    </select>
-                    <select id="relationship-filter">
-                        <option value="all">
-                            All Relationships
-                        </option>
-                        <option value="grandfather">Grandfather</option>
-                        <option value="grandmother">Grandmother</option>
-                        <option value="father">Father</option>
-                        <option value="mother">Mother</option>
-                        <option value="son">Son</option>
-                        <option value="daughter">Daughter</option>
-                        <option value="brother">Brother</option>
-                        <option value="sister">Sister</option>
-                        <option value="spouse">Spouse</option>
-                    </select>
-
-                </div>
-
-
-                <!-- Member Cards -->
-                <div class="members-grid" id="members-container">
-
-                    <!-- Member cards generated by JavaScript -->
-
-                    <div class="empty-members-message">
-                        <h3>No family members yet</h3>
-                        <p>
-                            Start building your family tree by adding
-                            your first family member.
-                        </p>
-
-                        <button class="btn btn-primary add-member-btn">
-                            + Add First Member
-                        </button>
-                    </div>
-
-                </div>
-
+      <section class="family-members-section" id="members">
+        <div class="container">
+          <div class="section-header">
+            <div>
+              <span class="section-label">Our Family</span>
+              <h2>Family Members</h2>
             </div>
 
-        </section>
-
+            <button class="btn btn-primary add-member-btn">+ Add Member</button>
+          </div>
+
+          <!-- Member Filters -->
+          <div class="member-filters">
+            <input
+              type="search"
+              id="member-search"
+              placeholder="Search members..."
+              aria-label="Search members"
+            />
+
+            <select id="family-sort">
+              <option value="default">Default</option>
+              <option value="name-asc">Name (A-Z)</option>
+              <option value="name-dsc">Name (Z-A)</option>
+              <option value="age-oldest">Age (Oldest First)</option>
+              <option value="age-youngest">Age (Youngest First)</option>
+              <option value="recently-added">Recently Added</option>
+            </select>
+            <select id="relationship-filter">
+              <option value="all">All Relationships</option>
+              <option value="grandfather">Grandfather</option>
+              <option value="grandmother">Grandmother</option>
+              <option value="father">Father</option>
+              <option value="mother">Mother</option>
+              <option value="son">Son</option>
+              <option value="daughter">Daughter</option>
+              <option value="brother">Brother</option>
+              <option value="sister">Sister</option>
+              <option value="spouse">Spouse</option>
+            </select>
+          </div>
+
+          <!-- Member Cards -->
+          <div class="members-grid" id="members-container">
+            <!-- Member cards generated by JavaScript -->
+
+            <div class="empty-members-message">
+              <h3>No family members yet</h3>
+              <p>
+                Start building your family tree by adding your first family
+                member.
+              </p>
+
+              <button class="btn btn-primary add-member-btn">
+                + Add First Member
+              </button>
+            </div>
+          </div>
+        </div>
+      </section>
     </main>
 
-
     <!-- ========================================
          ADD / EDIT MEMBER MODAL
     ========================================= -->
     <div class="modal" id="member-modal">
+      <div class="modal-overlay"></div>
+
+      <div class="modal-content">
+        <button
+          class="modal-close"
+          id="close-member-modal"
+          aria-label="Close modal"
+        >
+          &times;
+        </button>
+
+        <div class="modal-header">
+          <h2 id="member-modal-title">Add Family Member</h2>
+          <p>Add their details to your family tree.</p>
+        </div>
 
-        <div class="modal-overlay"></div>
-
-        <div class="modal-content">
-
-            <button
-                class="modal-close"
-                id="close-member-modal"
-                aria-label="Close modal"
-            >
-                &times;
+        <form id="member-form">
+          <!-- Hidden ID used when editing -->
+          <input type="hidden" id="member-id" />
+
+          <div class="form-group">
+            <label for="member-image"> Profile Image </label>
+
+            <input type="file" id="member-image" accept="image/*" />
+          </div>
+
+          <div class="form-group">
+            <label for="member-name"> Full Name </label>
+
+            <input
+              type="text"
+              id="member-name"
+              placeholder="Enter full name"
+              required
+            />
+          </div>
+
+          <div class="form-group">
+            <label for="member-dob"> Date of Birth </label>
+
+            <input type="date" id="member-dob" required />
+          </div>
+
+          <div class="form-group">
+            <label for="member-gender"> Gender </label>
+
+            <select id="member-gender" required>
+              <option value="">Select gender</option>
+              <option value="male">Male</option>
+              <option value="female">Female</option>
+              <option value="other">Other</option>
+            </select>
+          </div>
+
+          <div class="form-group">
+            <label for="member-relationship"> Relationship </label>
+
+            <select id="member-relationship" required>
+              <option value="">Select relationship</option>
+
+              <option value="grandfather">Grandfather</option>
+              <option value="grandmother">Grandmother</option>
+              <option value="father">Father</option>
+              <option value="mother">Mother</option>
+              <option value="son">Son</option>
+              <option value="daughter">Daughter</option>
+              <option value="brother">Brother</option>
+              <option value="sister">Sister</option>
+              <option value="spouse">Spouse</option>
+            </select>
+          </div>
+
+          <div class="form-group">
+            <label for="related-to"> Related To </label>
+
+            <select id="related-to">
+              <option value="">Select family member</option>
+
+              <!-- Options generated by JavaScript -->
+            </select>
+          </div>
+
+          <div class="form-group">
+            <label for="member-bio"> Short Bio </label>
+
+            <textarea
+              id="member-bio"
+              rows="4"
+              placeholder="Write something about this family member..."
+            ></textarea>
+          </div>
+
+          <div class="form-actions">
+            <button type="button" class="btn btn-secondary" id="cancel-member">
+              Cancel
             </button>
 
-            <div class="modal-header">
-                <h2 id="member-modal-title">Add Family Member</h2>
-                <p>Add their details to your family tree.</p>
-            </div>
-
-
-            <form id="member-form">
-
-                <!-- Hidden ID used when editing -->
-                <input type="hidden" id="member-id">
-
-
-                <div class="form-group">
-                    <label for="member-image">
-                        Profile Image
-                    </label>
-
-                    <input
-                        type="file"
-                        id="member-image"
-                        accept="image/*"
-                    >
-                </div>
-
-
-                <div class="form-group">
-                    <label for="member-name">
-                        Full Name
-                    </label>
-
-                    <input
-                        type="text"
-                        id="member-name"
-                        placeholder="Enter full name"
-                        required
-                    >
-                </div>
-
-
-                <div class="form-group">
-                    <label for="member-dob">
-                        Date of Birth
-                    </label>
-
-                    <input
-                        type="date"
-                        id="member-dob"
-                        required
-                    >
-                </div>
-
-
-                <div class="form-group">
-                    <label for="member-gender">
-                        Gender
-                    </label>
-
-                    <select id="member-gender" required>
-                        <option value="">Select gender</option>
-                        <option value="male">Male</option>
-                        <option value="female">Female</option>
-                        <option value="other">Other</option>
-                    </select>
-                </div>
-
-
-                <div class="form-group">
-                    <label for="member-relationship">
-                        Relationship
-                    </label>
-
-                    <select id="member-relationship" required>
-
-                        <option value="">
-                            Select relationship
-                        </option>
-
-                        <option value="grandfather">Grandfather</option>
-                        <option value="grandmother">Grandmother</option>
-                        <option value="father">Father</option>
-                        <option value="mother">Mother</option>
-                        <option value="son">Son</option>
-                        <option value="daughter">Daughter</option>
-                        <option value="brother">Brother</option>
-                        <option value="sister">Sister</option>
-                        <option value="spouse">Spouse</option>
-
-                    </select>
-                </div>
-
-
-                <div class="form-group">
-                    <label for="related-to">
-                        Related To
-                    </label>
-
-                    <select id="related-to">
-                        <option value="">
-                            Select family member
-                        </option>
-
-                        <!-- Options generated by JavaScript -->
-                    </select>
-                </div>
-
-
-                <div class="form-group">
-                    <label for="member-bio">
-                        Short Bio
-                    </label>
-
-                    <textarea
-                        id="member-bio"
-                        rows="4"
-                        placeholder="Write something about this family member..."
-                    ></textarea>
-                </div>
-
-
-                <div class="form-actions">
-
-                    <button
-                        type="button"
-                        class="btn btn-secondary"
-                        id="cancel-member"
-                    >
-                        Cancel
-                    </button>
-
-                    <button
-                        type="submit"
-                        class="btn btn-primary"
-                    >
-                        Save Member
-                    </button>
-
-                </div>
-
-            </form>
-
-        </div>
-
+            <button type="submit" class="btn btn-primary">Save Member</button>
+          </div>
+        </form>
+      </div>
     </div>
 
-
     <!-- ========================================
          MEMBER DETAILS MODAL
     ========================================= -->
     <div class="modal" id="details-modal">
+      <div class="modal-overlay"></div>
 
-        <div class="modal-overlay"></div>
+      <div class="modal-content member-details">
+        <button
+          class="modal-close"
+          id="close-details-modal"
+          aria-label="Close member details"
+        >
+          &times;
+        </button>
 
-        <div class="modal-content member-details">
-
-            <button
-                class="modal-close"
-                id="close-details-modal"
-                aria-label="Close member details"
-            >
-                &times;
-            </button>
-
-
-            <div class="details-profile">
-
-                <div class="details-image">
-                    <img
-                        id="details-member-image"
-                        src=""
-                        alt="Family member"
-                    >
-                </div>
-
-                <h2 id="details-member-name">
-                    Member Name
-                </h2>
-
-                <span id="details-member-relationship">
-                    Relationship
-                </span>
-
-            </div>
+        <div class="details-profile">
+          <div class="details-image">
+            <img id="details-member-image" src="" alt="Family member" />
+          </div>
 
+          <h2 id="details-member-name">Member Name</h2>
 
-            <div class="details-information">
-
-                <div class="detail-item">
-                    <strong>Date of Birth</strong>
-                    <span id="details-member-dob">--</span>
-                </div>
-
-                <div class="detail-item">
-                    <strong>Age</strong>
-                    <span id="details-member-age">--</span>
-                </div>
-
-                <div class="detail-item">
-                    <strong>Gender</strong>
-                    <span id="details-member-gender">--</span>
-                </div>
-
-                <div class="detail-item">
-                    <strong>Bio</strong>
-                    <p id="details-member-bio">
-                        No biography available.
-                    </p>
-                </div>
-
-            </div>
-
-
-            <div class="form-actions">
-
-                <button
-                    class="btn btn-secondary"
-                    id="details-close-btn"
-                >
-                    Close
-                </button>
+          <span id="details-member-relationship"> Relationship </span>
+        </div>
 
-                <button
-                    class="btn btn-primary"
-                    id="details-edit-btn"
-                >
-                    Edit Profile
-                </button>
+        <div class="details-information">
+          <div class="detail-item">
+            <strong>Date of Birth</strong>
+            <span id="details-member-dob">--</span>
+          </div>
+
+          <div class="detail-item">
+            <strong>Age</strong>
+            <span id="details-member-age">--</span>
+          </div>
+
+          <div class="detail-item">
+            <strong>Gender</strong>
+            <span id="details-member-gender">--</span>
+          </div>
+
+          <div class="detail-item">
+            <strong>Bio</strong>
+            <p id="details-member-bio">No biography available.</p>
+          </div>
+        </div>
 
-            </div>
+        <div class="form-actions">
+          <button class="btn btn-secondary" id="details-close-btn">
+            Close
+          </button>
 
+          <button class="btn btn-primary" id="details-edit-btn">
+            Edit Profile
+          </button>
         </div>
-
+      </div>
     </div>
 
-
     <!-- ========================================
          FOOTER
     ========================================= -->
     <footer class="site-footer">
+      <div class="container footer-container">
+        <div class="footer-brand">
+          <a href="#home" class="logo"> FamilyTree </a>
 
-        <div class="container footer-container">
-
-            <div class="footer-brand">
-
-                <a href="#home" class="logo">
-                    FamilyTree
-                </a>
-
-                <p>
-                    Preserve your family's history and keep
-                    every generation connected.
-                </p>
-
-            </div>
-
-
-            <div class="footer-links">
-
-                <a href="#home">Home</a>
-                <a href="#family-tree">My Tree</a>
-                <a href="#members">Members</a>
-
-            </div>
-
+          <p>
+            Preserve your family's history and keep every generation connected.
+          </p>
         </div>
 
-
-        <div class="footer-bottom">
-
-            <div class="container">
-
-                <p>
-                    &copy; <span id="current-year"></span>
-                    FamilyTree. All rights reserved.
-                </p>
-
-            </div>
-
+        <div class="footer-links">
+          <a href="#home">Home</a>
+          <a href="#family-tree">My Tree</a>
+          <a href="#members">Members</a>
         </div>
-
+      </div>
+
+      <div class="footer-bottom">
+        <div class="container">
+          <p>
+            &copy; <span id="current-year"></span>
+            FamilyTree. All rights reserved.
+          </p>
+        </div>
+      </div>
     </footer>
 
-
     <!-- JavaScript -->
     <script src="js/app.js"></script>
-
-</body>
-</html>
\ No newline at end of file
+  </body>
+</html>
diff --git a/js/app.js b/js/app.js
index 6beae2b..1181754 100644
--- a/js/app.js
+++ b/js/app.js
@@ -7,7 +7,6 @@ const STORAGE_KEY = "familyTreeMembers";
 let members = JSON.parse(localStorage.getItem(STORAGE_KEY)) || [];
 let selectedMemberId = null;
 
-
 // ==========================================
 // DOM ELEMENTS
 // ==========================================
@@ -22,479 +21,329 @@ const memberNameInput = document.getElementById("member-name");
 const memberDobInput = document.getElementById("member-dob");
 memberDobInput.max = new Date().toISOString().split("T")[0];
 const memberGenderInput = document.getElementById("member-gender");
-const memberRelationshipInput =
-    document.getElementById("member-relationship");
+const memberRelationshipInput = document.getElementById("member-relationship");
 
 const relatedToInput = document.getElementById("related-to");
 const memberBioInput = document.getElementById("member-bio");
 const memberImageInput = document.getElementById("member-image");
 
-const membersContainer =
-    document.getElementById("members-container");
+const membersContainer = document.getElementById("members-container");
 
-const memberSearch =
-    document.getElementById("member-search");
+const memberSearch = document.getElementById("member-search");
 
-const treeSearch =
-    document.getElementById("tree-search");
+const treeSearch = document.getElementById("tree-search");
 
-const relationshipFilter =
-    document.getElementById("relationship-filter");
+const relationshipFilter = document.getElementById("relationship-filter");
 
+const toggleThemeButton = document.querySelector(".toggle-theme-btn");
 
 // ==========================================
 // DEFAULT PROFILE IMAGE
 // ==========================================
 
 const defaultImage =
-    "https://ui-avatars.com/api/?background=e8f3ed&color=2f6b4f&name=Family+Member";
+  "https://ui-avatars.com/api/?background=e8f3ed&color=2f6b4f&name=Family+Member";
 
+// ==========================================
+// TOGGLE THEME
+// ==========================================
+function toggleTheme() {
+  const theme = document.documentElement.getAttribute("data-theme");
+  document.documentElement.setAttribute(
+    "data-theme",
+    theme === "dark" ? "light" : "dark",
+  );
+  toggleThemeButton.innerText = theme === "dark" ? "🌙" : "☀️";
+}
 
 // ==========================================
 // SAVE TO LOCAL STORAGE
 // ==========================================
 
 function saveMembers() {
-    localStorage.setItem(
-        STORAGE_KEY,
-        JSON.stringify(members)
-    );
+  localStorage.setItem(STORAGE_KEY, JSON.stringify(members));
 }
 
-
 // ==========================================
 // GENERATE UNIQUE ID
 // ==========================================
 
 function generateId() {
-    return Date.now().toString();
+  return Date.now().toString();
 }
 
-
 // ==========================================
 // CALCULATE AGE
 // ==========================================
 
 function calculateAge(dateOfBirth) {
+  if (!dateOfBirth) return "--";
 
-    if (!dateOfBirth) return "--";
+  const today = new Date();
+  const birthDate = new Date(dateOfBirth);
 
-    const today = new Date();
-    const birthDate = new Date(dateOfBirth);
+  let age = today.getFullYear() - birthDate.getFullYear();
 
-    let age =
-        today.getFullYear() -
-        birthDate.getFullYear();
+  const monthDifference = today.getMonth() - birthDate.getMonth();
 
-    const monthDifference =
-        today.getMonth() -
-        birthDate.getMonth();
+  if (
+    monthDifference < 0 ||
+    (monthDifference === 0 && today.getDate() < birthDate.getDate())
+  ) {
+    age--;
+  }
 
-    if (
-        monthDifference < 0 ||
-        (
-            monthDifference === 0 &&
-            today.getDate() <
-            birthDate.getDate()
-        )
-    ) {
-        age--;
-    }
-
-    return age;
+  return age;
 }
 
-
 // ==========================================
 // FORMAT DATE
 // ==========================================
 
 function formatDate(date) {
+  if (!date) return "--";
 
-    if (!date) return "--";
-
-    return new Date(
-        date + "T00:00:00"
-    ).toLocaleDateString(
-        "en-US",
-        {
-            year: "numeric",
-            month: "long",
-            day: "numeric"
-        }
-    );
+  return new Date(date + "T00:00:00").toLocaleDateString("en-US", {
+    year: "numeric",
+    month: "long",
+    day: "numeric",
+  });
 }
 
-
 // ==========================================
 // FORMAT TEXT
 // ==========================================
 
 function formatText(text) {
+  if (!text) return "";
 
-    if (!text) return "";
-
-    return text
-        .replace(/-/g, " ")
-        .replace(/\b\w/g, letter =>
-            letter.toUpperCase()
-        );
+  return text
+    .replace(/-/g, " ")
+    .replace(/\b\w/g, (letter) => letter.toUpperCase());
 }
 
-
 // ==========================================
 // ESCAPE HTML
 // ==========================================
 
 function escapeHTML(value = "") {
-
-    return String(value)
-        .replaceAll("&", "&amp;")
-        .replaceAll("<", "&lt;")
-        .replaceAll(">", "&gt;")
-        .replaceAll('"', "&quot;")
-        .replaceAll("'", "&#039;");
+  return String(value)
+    .replaceAll("&", "&amp;")
+    .replaceAll("<", "&lt;")
+    .replaceAll(">", "&gt;")
+    .replaceAll('"', "&quot;")
+    .replaceAll("'", "&#039;");
 }
 
-
 // ==========================================
 // OPEN ADD MEMBER MODAL
 // ==========================================
 
 function openAddMemberModal() {
+  memberForm.reset();
 
-    memberForm.reset();
-
-    memberIdInput.value = "";
+  memberIdInput.value = "";
 
-    document.getElementById(
-        "member-modal-title"
-    ).textContent = "Add Family Member";
+  document.getElementById("member-modal-title").textContent =
+    "Add Family Member";
 
-    updateRelatedToOptions();
+  updateRelatedToOptions();
 
-    memberModal.classList.add("active");
+  memberModal.classList.add("active");
 }
 
-
 // ==========================================
 // CLOSE MEMBER MODAL
 // ==========================================
 
 function closeMemberModal() {
+  memberModal.classList.remove("active");
 
-    memberModal.classList.remove("active");
-
-    memberForm.reset();
+  memberForm.reset();
 
-    memberIdInput.value = "";
+  memberIdInput.value = "";
 }
 
-
 // ==========================================
 // ADD MEMBER BUTTONS
 // ==========================================
 
-document.querySelectorAll(
-    ".add-member-btn"
-).forEach(button => {
-
-    button.addEventListener(
-        "click",
-        openAddMemberModal
-    );
-
+document.querySelectorAll(".add-member-btn").forEach((button) => {
+  button.addEventListener("click", openAddMemberModal);
 });
 
-
 // Build My Tree Button
 
-document.querySelector(
-    ".build-tree-btn"
-)?.addEventListener(
-    "click",
-    openAddMemberModal
-);
-
+document
+  .querySelector(".build-tree-btn")
+  ?.addEventListener("click", openAddMemberModal);
 
 // ==========================================
 // CLOSE BUTTONS
 // ==========================================
 
-document.getElementById(
-    "close-member-modal"
-).addEventListener(
-    "click",
-    closeMemberModal
-);
-
-
-document.getElementById(
-    "cancel-member"
-).addEventListener(
-    "click",
-    closeMemberModal
-);
+document
+  .getElementById("close-member-modal")
+  .addEventListener("click", closeMemberModal);
 
+document
+  .getElementById("cancel-member")
+  .addEventListener("click", closeMemberModal);
 
 // Modal Overlay
 
 memberModal
-    .querySelector(".modal-overlay")
-    .addEventListener(
-        "click",
-        closeMemberModal
-    );
-
+  .querySelector(".modal-overlay")
+  .addEventListener("click", closeMemberModal);
 
 // ==========================================
 // IMAGE TO BASE64
 // ==========================================
 
 function imageToBase64(file) {
+  return new Promise((resolve, reject) => {
+    const reader = new FileReader();
 
-    return new Promise(
-        (resolve, reject) => {
-
-            const reader =
-                new FileReader();
+    reader.onload = () => resolve(reader.result);
 
-            reader.onload = () =>
-                resolve(reader.result);
+    reader.onerror = reject;
 
-            reader.onerror =
-                reject;
-
-            reader.readAsDataURL(file);
-
-        }
-    );
+    reader.readAsDataURL(file);
+  });
 }
 
-
 // ==========================================
 // MEMBER FORM SUBMIT
 // ==========================================
 
-memberForm.addEventListener(
-    "submit",
-    async function (event) {
-
-        event.preventDefault();
-
-        const today = new Date().toISOString().split("T")[0];
-
-        if (memberDobInput.value > today) {
-            alert("Date of birth cannot be in the future.");
-            return;
-        }
-
-        const id =
-            memberIdInput.value;
-
-        const existingMember =
-            members.find(
-                member => member.id === id
-            );
-
-        let image =
-            existingMember?.image ||
-            defaultImage;
-
-        const selectedImage =
-            memberImageInput.files[0];
-
-        if (selectedImage) {
-
-            // Keep LocalStorage reasonably safe.
-            if (
-                selectedImage.size >
-                2 * 1024 * 1024
-            ) {
-                alert(
-                    "Please select an image smaller than 2MB."
-                );
-
-                return;
-            }
-
-            image =
-                await imageToBase64(
-                    selectedImage
-                );
-        }
+memberForm.addEventListener("submit", async function (event) {
+  event.preventDefault();
 
+  const today = new Date().toISOString().split("T")[0];
 
-        const memberData = {
+  if (memberDobInput.value > today) {
+    alert("Date of birth cannot be in the future.");
+    return;
+  }
 
-            id:
-                id ||
-                generateId(),
+  const id = memberIdInput.value;
 
-            name:
-                memberNameInput
-                    .value
-                    .trim(),
+  const existingMember = members.find((member) => member.id === id);
 
-            dob:
-                memberDobInput.value,
+  let image = existingMember?.image || defaultImage;
 
-            gender:
-                memberGenderInput.value,
+  const selectedImage = memberImageInput.files[0];
 
-            relationship:
-                memberRelationshipInput.value,
-
-            relatedTo:
-                relatedToInput.value,
-
-            bio:
-                memberBioInput
-                    .value
-                    .trim(),
-
-            image: image
-
-        };
+  if (selectedImage) {
+    // Keep LocalStorage reasonably safe.
+    if (selectedImage.size > 2 * 1024 * 1024) {
+      alert("Please select an image smaller than 2MB.");
 
+      return;
+    }
 
-        if (id) {
+    image = await imageToBase64(selectedImage);
+  }
 
-            // EDIT MEMBER
+  const memberData = {
+    id: id || generateId(),
 
-            const index =
-                members.findIndex(
-                    member =>
-                        member.id === id
-                );
+    name: memberNameInput.value.trim(),
 
-            if (index !== -1) {
+    dob: memberDobInput.value,
 
-                members[index] =
-                    memberData;
+    gender: memberGenderInput.value,
 
-            }
+    relationship: memberRelationshipInput.value,
 
-        } else {
+    relatedTo: relatedToInput.value,
 
-            // ADD MEMBER
+    bio: memberBioInput.value.trim(),
 
-            members.push(
-                memberData
-            );
+    image: image,
+  };
 
-        }
+  if (id) {
+    // EDIT MEMBER
 
+    const index = members.findIndex((member) => member.id === id);
 
-        saveMembers();
+    if (index !== -1) {
+      members[index] = memberData;
+    }
+  } else {
+    // ADD MEMBER
 
-        renderApp();
+    members.push(memberData);
+  }
 
-        closeMemberModal();
+  saveMembers();
 
-    }
-);
+  renderApp();
 
+  closeMemberModal();
+});
 
 // ==========================================
 // UPDATE RELATED TO OPTIONS
 // ==========================================
 
-function updateRelatedToOptions(
-    currentMemberId = null
-) {
-
-    relatedToInput.innerHTML =
-        `<option value="">
+function updateRelatedToOptions(currentMemberId = null) {
+  relatedToInput.innerHTML = `<option value="">
             Select family member
         </option>`;
 
+  members.forEach((member) => {
+    if (member.id === currentMemberId) {
+      return;
+    }
 
-    members.forEach(member => {
-
-        if (
-            member.id ===
-            currentMemberId
-        ) {
-            return;
-        }
-
-
-        const option =
-            document.createElement(
-                "option"
-            );
-
-        option.value =
-            member.id;
+    const option = document.createElement("option");
 
-        option.textContent =
-            `${member.name} (${formatText(
-                member.relationship
-            )})`;
+    option.value = member.id;
 
-        relatedToInput.appendChild(
-            option
-        );
-
-    });
+    option.textContent = `${member.name} (${formatText(member.relationship)})`;
 
+    relatedToInput.appendChild(option);
+  });
 }
 
-
 // ==========================================
 // SORT MEMBERS
 // ==========================================
 
 function sortMembers(list, sortBy) {
+  const sortedMembers = [...list];
 
-    const sortedMembers = [...list];
-
-    switch (sortBy) {
-
-        case "name-asc":
-            return sortedMembers.sort((a, b) =>
-                a.name.localeCompare(b.name)
-            );
+  switch (sortBy) {
+    case "name-asc":
+      return sortedMembers.sort((a, b) => a.name.localeCompare(b.name));
 
-        case "name-dsc":
-            return sortedMembers.sort((a, b) =>
-                b.name.localeCompare(a.name)
-            );
+    case "name-dsc":
+      return sortedMembers.sort((a, b) => b.name.localeCompare(a.name));
 
-        case "age-oldest":
-            return sortedMembers.sort((a, b) =>
-                new Date(a.dob) - new Date(b.dob)
-            );
+    case "age-oldest":
+      return sortedMembers.sort((a, b) => new Date(a.dob) - new Date(b.dob));
 
-        case "age-youngest":
-            return sortedMembers.sort((a, b) =>
-                new Date(b.dob) - new Date(a.dob)
-            );
+    case "age-youngest":
+      return sortedMembers.sort((a, b) => new Date(b.dob) - new Date(a.dob));
 
-        case "recently-added":
-            return sortedMembers.sort(
-                (a, b) => Number(b.id) - Number(a.id)
-            );
+    case "recently-added":
+      return sortedMembers.sort((a, b) => Number(b.id) - Number(a.id));
 
-        default:
-            return sortedMembers;
-    }
+    default:
+      return sortedMembers;
+  }
 }
 // ==========================================
 // RENDER MEMBERS
 // ==========================================
 
-function renderMembers(
-    list = members
-) {
-
-    membersContainer.innerHTML = "";
-
-
-    if (list.length === 0) {
+function renderMembers(list = members) {
+  membersContainer.innerHTML = "";
 
-        membersContainer.innerHTML = `
+  if (list.length === 0) {
+    membersContainer.innerHTML = `
 
             <div class="empty-members-message">
 
@@ -518,63 +367,38 @@ function renderMembers(
 
         `;
 
+    document
+      .getElementById("empty-add-member")
+      ?.addEventListener("click", openAddMemberModal);
 
-        document.getElementById(
-            "empty-add-member"
-        )?.addEventListener(
-            "click",
-            openAddMemberModal
-        );
+    return;
+  }
 
+  const dropdown = document.getElementById("family-sort");
+  const sortedMembers = sortMembers(list, dropdown.value);
 
-        return;
-    }
-
-    const dropdown = document.getElementById("family-sort");
-    const sortedMembers = sortMembers(
-        list,
-        dropdown.value
-    );
-
-    sortedMembers.forEach(member => {
+  sortedMembers.forEach((member) => {
+    const card = document.createElement("div");
 
-        const card =
-            document.createElement(
-                "div"
-            );
+    card.className = "member-card";
 
-        card.className =
-            "member-card";
-
-
-        card.innerHTML = `
+    card.innerHTML = `
 
             <div class="member-card-header">
 
                 <img
-                    src="${escapeHTML(
-                        member.image ||
-                        defaultImage
-                    )}"
-                    alt="${escapeHTML(
-                        member.name
-                    )}"
+                    src="${escapeHTML(member.image || defaultImage)}"
+                    alt="${escapeHTML(member.name)}"
                 >
 
                 <div>
 
                     <h3>
-                        ${escapeHTML(
-                            member.name
-                        )}
+                        ${escapeHTML(member.name)}
                     </h3>
 
                     <span class="relationship">
-                        ${escapeHTML(
-                            formatText(
-                                member.relationship
-                            )
-                        )}
+                        ${escapeHTML(formatText(member.relationship))}
                     </span>
 
                 </div>
@@ -586,16 +410,12 @@ function renderMembers(
 
                 <p>
                     <strong>Age:</strong>
-                    ${calculateAge(
-                        member.dob
-                    )}
+                    ${calculateAge(member.dob)}
                 </p>
 
                 <p>
                     <strong>DOB:</strong>
-                    ${formatDate(
-                        member.dob
-                    )}
+                    ${formatDate(member.dob)}
                 </p>
 
             </div>
@@ -629,426 +449,229 @@ function renderMembers(
 
         `;
 
-
-        membersContainer.appendChild(
-            card
-        );
-
-    });
-
+    membersContainer.appendChild(card);
+  });
 }
 
-
 // ==========================================
 // MEMBER CARD ACTIONS
 // ==========================================
 
-membersContainer.addEventListener(
-    "click",
-    function (event) {
-
-        const button =
-            event.target.closest(
-                "button[data-action]"
-            );
-
-        if (!button) return;
-
-
-        const id =
-            button.dataset.id;
-
-        const action =
-            button.dataset.action;
-
-
-        if (action === "view") {
-
-            viewMember(id);
-
-        }
-
-
-        if (action === "edit") {
+membersContainer.addEventListener("click", function (event) {
+  const button = event.target.closest("button[data-action]");
 
-            editMember(id);
+  if (!button) return;
 
-        }
+  const id = button.dataset.id;
 
+  const action = button.dataset.action;
 
-        if (action === "delete") {
+  if (action === "view") {
+    viewMember(id);
+  }
 
-            deleteMember(id);
-
-        }
-
-    }
-);
+  if (action === "edit") {
+    editMember(id);
+  }
 
+  if (action === "delete") {
+    deleteMember(id);
+  }
+});
 
 // ==========================================
 // VIEW MEMBER
 // ==========================================
 
 function viewMember(id) {
+  const member = members.find((member) => member.id === id);
 
-    const member =
-        members.find(
-            member =>
-                member.id === id
-        );
-
-    if (!member) return;
-
-
-    selectedMemberId = id;
-
+  if (!member) return;
 
-    document.getElementById(
-        "details-member-image"
-    ).src =
-        member.image ||
-        defaultImage;
+  selectedMemberId = id;
 
+  document.getElementById("details-member-image").src =
+    member.image || defaultImage;
 
-    document.getElementById(
-        "details-member-name"
-    ).textContent =
-        member.name;
+  document.getElementById("details-member-name").textContent = member.name;
 
+  document.getElementById("details-member-relationship").textContent =
+    formatText(member.relationship);
 
-    document.getElementById(
-        "details-member-relationship"
-    ).textContent =
-        formatText(
-            member.relationship
-        );
+  document.getElementById("details-member-dob").textContent = formatDate(
+    member.dob,
+  );
 
+  document.getElementById("details-member-age").textContent = calculateAge(
+    member.dob,
+  );
 
-    document.getElementById(
-        "details-member-dob"
-    ).textContent =
-        formatDate(
-            member.dob
-        );
+  document.getElementById("details-member-gender").textContent = formatText(
+    member.gender,
+  );
 
+  document.getElementById("details-member-bio").textContent =
+    member.bio || "No biography available.";
 
-    document.getElementById(
-        "details-member-age"
-    ).textContent =
-        calculateAge(
-            member.dob
-        );
-
-
-    document.getElementById(
-        "details-member-gender"
-    ).textContent =
-        formatText(
-            member.gender
-        );
-
-
-    document.getElementById(
-        "details-member-bio"
-    ).textContent =
-        member.bio ||
-        "No biography available.";
-
-
-    detailsModal.classList.add(
-        "active"
-    );
-
+  detailsModal.classList.add("active");
 }
 
-
 // ==========================================
 // CLOSE DETAILS MODAL
 // ==========================================
 
 function closeDetailsModal() {
+  detailsModal.classList.remove("active");
 
-    detailsModal.classList.remove(
-        "active"
-    );
-
-    selectedMemberId = null;
+  selectedMemberId = null;
 }
 
+document
+  .getElementById("close-details-modal")
+  .addEventListener("click", closeDetailsModal);
 
-document.getElementById(
-    "close-details-modal"
-).addEventListener(
-    "click",
-    closeDetailsModal
-);
-
-
-document.getElementById(
-    "details-close-btn"
-).addEventListener(
-    "click",
-    closeDetailsModal
-);
-
+document
+  .getElementById("details-close-btn")
+  .addEventListener("click", closeDetailsModal);
 
 detailsModal
-    .querySelector(".modal-overlay")
-    .addEventListener(
-        "click",
-        closeDetailsModal
-    );
-
+  .querySelector(".modal-overlay")
+  .addEventListener("click", closeDetailsModal);
 
 // ==========================================
 // DETAILS EDIT BUTTON
 // ==========================================
 
-document.getElementById(
-    "details-edit-btn"
-).addEventListener(
-    "click",
-    function () {
-
-        if (!selectedMemberId) {
-            return;
-        }
-
-        const id =
-            selectedMemberId;
-
-        closeDetailsModal();
+document
+  .getElementById("details-edit-btn")
+  .addEventListener("click", function () {
+    if (!selectedMemberId) {
+      return;
+    }
 
-        editMember(id);
+    const id = selectedMemberId;
 
-    }
-);
+    closeDetailsModal();
 
+    editMember(id);
+  });
 
 // ==========================================
 // EDIT MEMBER
 // ==========================================
 
 function editMember(id) {
+  const member = members.find((member) => member.id === id);
 
-    const member =
-        members.find(
-            member =>
-                member.id === id
-        );
+  if (!member) return;
 
-    if (!member) return;
+  memberForm.reset();
 
+  document.getElementById("member-modal-title").textContent =
+    "Edit Family Member";
 
-    memberForm.reset();
+  memberIdInput.value = member.id;
 
+  memberNameInput.value = member.name;
 
-    document.getElementById(
-        "member-modal-title"
-    ).textContent =
-        "Edit Family Member";
+  memberDobInput.value = member.dob;
 
+  memberGenderInput.value = member.gender;
 
-    memberIdInput.value =
-        member.id;
+  memberRelationshipInput.value = member.relationship;
 
-    memberNameInput.value =
-        member.name;
+  memberBioInput.value = member.bio || "";
 
-    memberDobInput.value =
-        member.dob;
+  updateRelatedToOptions(member.id);
 
-    memberGenderInput.value =
-        member.gender;
-
-    memberRelationshipInput.value =
-        member.relationship;
-
-    memberBioInput.value =
-        member.bio || "";
-
-
-    updateRelatedToOptions(
-        member.id
-    );
-
-
-    relatedToInput.value =
-        member.relatedTo || "";
-
-
-    memberModal.classList.add(
-        "active"
-    );
+  relatedToInput.value = member.relatedTo || "";
 
+  memberModal.classList.add("active");
 }
 
-
 // ==========================================
 // DELETE MEMBER
 // ==========================================
 
 function deleteMember(id) {
+  const member = members.find((member) => member.id === id);
 
-    const member =
-        members.find(
-            member =>
-                member.id === id
-        );
-
-    if (!member) return;
-
-
-    const confirmed =
-        confirm(
-            `Delete ${member.name} from your family tree?`
-        );
-
+  if (!member) return;
 
-    if (!confirmed) return;
+  const confirmed = confirm(`Delete ${member.name} from your family tree?`);
 
+  if (!confirmed) return;
 
-    members =
-        members.filter(
-            member =>
-                member.id !== id
-        );
+  members = members.filter((member) => member.id !== id);
 
+  // Remove broken relationships.
 
-    // Remove broken relationships.
-
-    members = members.map(
-        member => {
-
-            if (
-                member.relatedTo === id
-            ) {
-
-                return {
-                    ...member,
-                    relatedTo: ""
-                };
-
-            }
-
-            return member;
-
-        }
-    );
-
+  members = members.map((member) => {
+    if (member.relatedTo === id) {
+      return {
+        ...member,
+        relatedTo: "",
+      };
+    }
 
-    saveMembers();
+    return member;
+  });
 
-    renderApp();
+  saveMembers();
 
+  renderApp();
 }
 
-
 // ==========================================
 // RELATIONSHIP -> GENERATION
 // ==========================================
 
-function getGeneration(
-    relationship
-) {
-
-    const grandparents = [
-        "grandfather",
-        "grandmother"
-    ];
-
+function getGeneration(relationship) {
+  const grandparents = ["grandfather", "grandmother"];
 
-    const parents = [
-        "father",
-        "mother",
-        "uncle",
-        "aunt"
-    ];
+  const parents = ["father", "mother", "uncle", "aunt"];
 
+  if (grandparents.includes(relationship)) {
+    return "grandparents";
+  }
 
-    if (
-        grandparents.includes(
-            relationship
-        )
-    ) {
-
-        return "grandparents";
-
-    }
-
-
-    if (
-        parents.includes(
-            relationship
-        )
-    ) {
-
-        return "parents";
-
-    }
-
-
-    return "children";
+  if (parents.includes(relationship)) {
+    return "parents";
+  }
 
+  return "children";
 }
 
-
 // ==========================================
 // RENDER FAMILY TREE
 // ==========================================
 
-function renderTree(
-    list = members
-) {
-
-    const generations = {
-        grandparents: [],
-        parents: [],
-        children: []
-    };
-
-
-    list.forEach(member => {
-
-        const generation =
-            getGeneration(
-                member.relationship
-            );
-
-        generations[
-            generation
-        ].push(member);
-
-    });
+function renderTree(list = members) {
+  const generations = {
+    grandparents: [],
+    parents: [],
+    children: [],
+  };
 
+  list.forEach((member) => {
+    const generation = getGeneration(member.relationship);
 
-    Object.keys(
-        generations
-    ).forEach(generation => {
-
-        const container =
-            document.querySelector(
-                `.${generation} .generation-members`
-            );
-
-        if (!container) return;
-
-
-        container.innerHTML = "";
+    generations[generation].push(member);
+  });
 
+  Object.keys(generations).forEach((generation) => {
+    const container = document.querySelector(
+      `.${generation} .generation-members`,
+    );
 
-        const generationMembers =
-            generations[
-                generation
-            ];
+    if (!container) return;
 
+    container.innerHTML = "";
 
-        if (
-            generationMembers.length === 0
-        ) {
+    const generationMembers = generations[generation];
 
-            container.innerHTML = `
+    if (generationMembers.length === 0) {
+      container.innerHTML = `
                 <p style="
                     color:#8a9690;
                     font-size:14px;
@@ -1057,354 +680,174 @@ function renderTree(
                 </p>
             `;
 
-            return;
-
-        }
-
-
-        generationMembers.forEach(
-            member => {
-
-                const card =
-                    document.createElement(
-                        "div"
-                    );
-
-
-                card.className =
-                    "tree-member";
+      return;
+    }
 
+    generationMembers.forEach((member) => {
+      const card = document.createElement("div");
 
-                card.dataset.id =
-                    member.id;
+      card.className = "tree-member";
 
+      card.dataset.id = member.id;
 
-                card.innerHTML = `
+      card.innerHTML = `
 
                     <img
-                        src="${escapeHTML(
-                            member.image ||
-                            defaultImage
-                        )}"
-                        alt="${escapeHTML(
-                            member.name
-                        )}"
+                        src="${escapeHTML(member.image || defaultImage)}"
+                        alt="${escapeHTML(member.name)}"
                     >
 
                     <h4>
-                        ${escapeHTML(
-                            member.name
-                        )}
+                        ${escapeHTML(member.name)}
                     </h4>
 
                     <span>
-                        ${escapeHTML(
-                            formatText(
-                                member.relationship
-                            )
-                        )}
+                        ${escapeHTML(formatText(member.relationship))}
                     </span>
 
                 `;
 
+      card.addEventListener("click", () => viewMember(member.id));
 
-                card.addEventListener(
-                    "click",
-                    () =>
-                        viewMember(
-                            member.id
-                        )
-                );
-
-
-                container.appendChild(
-                    card
-                );
-
-            }
-        );
-
+      container.appendChild(card);
     });
-
+  });
 }
 
-
 // ==========================================
 // UPDATE STATS
 // ==========================================
 
 function updateStats() {
+  document.getElementById("total-members").textContent = members.length;
 
-    document.getElementById(
-        "total-members"
-    ).textContent =
-        members.length;
-
-
-    const generations =
-        new Set();
-
-
-    members.forEach(member => {
-
-        generations.add(
-            getGeneration(
-                member.relationship
-            )
-        );
-
-    });
-
-
-    document.getElementById(
-        "total-generations"
-    ).textContent =
-        generations.size;
-
-
-    // Approximate family branches
-    // based on unique relationship links.
+  const generations = new Set();
 
-    const branches =
-        new Set(
-            members
-                .filter(
-                    member =>
-                        member.relatedTo
-                )
-                .map(
-                    member =>
-                        member.relatedTo
-                )
-        );
+  members.forEach((member) => {
+    generations.add(getGeneration(member.relationship));
+  });
 
+  document.getElementById("total-generations").textContent = generations.size;
 
-    document.getElementById(
-        "total-branches"
-    ).textContent =
-        branches.size;
+  // Approximate family branches
+  // based on unique relationship links.
 
+  const branches = new Set(
+    members
+      .filter((member) => member.relatedTo)
+      .map((member) => member.relatedTo),
+  );
 
-    // Find oldest member.
+  document.getElementById("total-branches").textContent = branches.size;
 
-    const validMembers =
-        members.filter(
-            member =>
-                member.dob
-        );
+  // Find oldest member.
 
+  const validMembers = members.filter((member) => member.dob);
 
-    if (
-        validMembers.length === 0
-    ) {
+  if (validMembers.length === 0) {
+    document.getElementById("oldest-generation").textContent = "--";
 
-        document.getElementById(
-            "oldest-generation"
-        ).textContent = "--";
+    return;
+  }
 
-        return;
-
-    }
-
-
-    const oldestMember =
-        [...validMembers].sort(
-            (a, b) =>
-                new Date(a.dob) -
-                new Date(b.dob)
-        )[0];
-
-
-    document.getElementById(
-        "oldest-generation"
-    ).textContent =
-        calculateAge(
-            oldestMember.dob
-        );
+  const oldestMember = [...validMembers].sort(
+    (a, b) => new Date(a.dob) - new Date(b.dob),
+  )[0];
 
+  document.getElementById("oldest-generation").textContent = calculateAge(
+    oldestMember.dob,
+  );
 }
 
-
 // ==========================================
 // SEARCH & FILTER MEMBERS
 // ==========================================
 
 function filterMembers() {
+  const searchValue = memberSearch.value.toLowerCase().trim();
 
-    const searchValue =
-        memberSearch.value
-            .toLowerCase()
-            .trim();
-
-
-    const relationship =
-        relationshipFilter.value;
-
-
-    const filtered =
-        members.filter(member => {
-
-            const matchesSearch =
-                member.name
-                    .toLowerCase()
-                    .includes(
-                        searchValue
-                    );
-
-
-            const matchesRelationship =
-                relationship === "all" ||
-                member.relationship ===
-                    relationship;
-
+  const relationship = relationshipFilter.value;
 
-            return (
-                matchesSearch &&
-                matchesRelationship
-            );
+  const filtered = members.filter((member) => {
+    const matchesSearch = member.name.toLowerCase().includes(searchValue);
 
-        });
+    const matchesRelationship =
+      relationship === "all" || member.relationship === relationship;
 
+    return matchesSearch && matchesRelationship;
+  });
 
-    renderMembers(
-        filtered
-    );
-
+  renderMembers(filtered);
 }
 
+memberSearch.addEventListener("input", filterMembers);
 
-memberSearch.addEventListener(
-    "input",
-    filterMembers
-);
-
-
-relationshipFilter.addEventListener(
-    "change",
-    filterMembers
-);
+relationshipFilter.addEventListener("change", filterMembers);
 
 const sortDropdown = document.getElementById("family-sort");
 
-sortDropdown.addEventListener(
-    "change",
-    filterMembers
-);
+sortDropdown.addEventListener("change", filterMembers);
 
 // ==========================================
 // SEARCH TREE
 // ==========================================
 
-treeSearch.addEventListener(
-    "input",
-    function () {
-
-        const searchValue =
-            treeSearch.value
-                .toLowerCase()
-                .trim();
-
-
-        if (!searchValue) {
-
-            renderTree(
-                members
-            );
+treeSearch.addEventListener("input", function () {
+  const searchValue = treeSearch.value.toLowerCase().trim();
 
-            return;
+  if (!searchValue) {
+    renderTree(members);
 
-        }
+    return;
+  }
 
+  const filtered = members.filter((member) =>
+    member.name.toLowerCase().includes(searchValue),
+  );
 
-        const filtered =
-            members.filter(
-                member =>
-                    member.name
-                        .toLowerCase()
-                        .includes(
-                            searchValue
-                        )
-            );
-
-
-        renderTree(
-            filtered
-        );
-
-    }
-);
-
+  renderTree(filtered);
+});
 
 // ==========================================
 // ESC KEY CLOSE MODALS
 // ==========================================
 
-document.addEventListener(
-    "keydown",
-    function (event) {
-
-        if (
-            event.key !==
-            "Escape"
-        ) {
-            return;
-        }
+document.addEventListener("keydown", function (event) {
+  if (event.key !== "Escape") {
+    return;
+  }
 
+  if (memberModal.classList.contains("active")) {
+    closeMemberModal();
+  }
 
-        if (
-            memberModal.classList.contains(
-                "active"
-            )
-        ) {
-
-            closeMemberModal();
-
-        }
-
-
-        if (
-            detailsModal.classList.contains(
-                "active"
-            )
-        ) {
-
-            closeDetailsModal();
-
-        }
-
-    }
-);
-
+  if (detailsModal.classList.contains("active")) {
+    closeDetailsModal();
+  }
+});
 
 // ==========================================
 // CURRENT YEAR
 // ==========================================
 
-document.getElementById(
-    "current-year"
-).textContent =
-    new Date().getFullYear();
-
+document.getElementById("current-year").textContent = new Date().getFullYear();
 
 // ==========================================
 // RENDER COMPLETE APP
 // ==========================================
 
 function renderApp() {
+  renderMembers();
 
-    renderMembers();
+  renderTree();
 
-    renderTree();
-
-    updateStats();
-
-    updateRelatedToOptions();
+  updateStats();
 
+  updateRelatedToOptions();
 }
 
-
 // ==========================================
 // INITIALIZE APPLICATION
 // ==========================================
 
-renderApp();
\ No newline at end of file
+renderApp();