diff --git a/client/src/components/AddFamilyMember/AddFamilyMember.js b/client/src/components/AddFamilyMember/AddFamilyMember.js
index 234877a..e958389 100644
--- a/client/src/components/AddFamilyMember/AddFamilyMember.js
+++ b/client/src/components/AddFamilyMember/AddFamilyMember.js
@@ -613,7 +613,7 @@ function AddFamilyMemberPopup({ trigger, userid }) {
                 <div>
                   <label>
                     Relationship:
-                    <select {...register("selectedMemberRelationship", { required: true })} style={{ fontFamily: 'Alata', marginLeft: '10px', width: '145px' }} defaultValue={''}>
+                    <select {...register("selectedMemberRelationship", { required: true })} style={styles.SelectStyle} defaultValue={''}>
                       <option value="" disabled hidden>Select</option>
                       <option value="spouse">Spouse</option>
                       <option value="child">Child</option>
@@ -651,7 +651,7 @@ function AddFamilyMemberPopup({ trigger, userid }) {
                 }}>
                   <label>
                     {extendedRelations[selectedMemberRelationship]?.label || "Connect To"}:
-                    <select {...register("connectTo", { required: false })} style={{ fontFamily: 'Alata', marginLeft: '10px', width: '180px' }} defaultValue={''}>
+                    <select {...register("connectTo", { required: false })} style={styles.SelectStyle} defaultValue={''}>
                       <option value="">Skip / Link Later</option>
                       {treeMembers
                         .filter(m => String(m.id) !== String(currentAccountID))
@@ -784,9 +784,9 @@ function AddFamilyMemberPopup({ trigger, userid }) {
                     <input {...register2("lastName", { required: true })} type="text" placeholder="" style={styles.FieldStyle} required />
                   </label>
                 </li>
-                <li style={styles.ItemStyle} >
+                <li style={styles.ItemStyle}>
                   <label>*Gender:
-                    <select {...register2("gender", { required: true })} style={{ fontFamily: 'Alata', marginLeft: '10px', width: '85px' }} defaultValue={''} required>
+                    <select {...register2("gender", { required: true })} style={styles.SelectStyle} defaultValue={''} required>
                       <option value="" disabled hidden>Select</option>
                       <option value="M">Male</option>
                       <option value="F">Female</option>
@@ -798,7 +798,7 @@ function AddFamilyMemberPopup({ trigger, userid }) {
                 <li style={styles.ItemStyle}>
                   <label>
                     *Relationship:
-                    <select {...register2("relationship", { required: true })} style={{ fontFamily: 'Alata', marginLeft: '10px', width: '145px' }} defaultValue={''} required>
+                    <select {...register2("relationship", { required: true })} style={styles.SelectStyle} defaultValue={''} required>
                       <option value="" disabled hidden>Select</option>
                       <option value="spouse">Spouse</option>
                       <option value="child">Child</option>
diff --git a/client/src/components/AddFamilyMember/styles.js b/client/src/components/AddFamilyMember/styles.js
index c61ccac..e762cfa 100644
--- a/client/src/components/AddFamilyMember/styles.js
+++ b/client/src/components/AddFamilyMember/styles.js
@@ -1,99 +1,140 @@
-export const DefaultStyle = {
-    fontFamily: 'Alata',
-};
-
-export const FieldStyle = {
-    borderRadius: '5px',
-    border: '1px solid #000000',
-    marginLeft: '10px'
-};
-
-export const ListStyle = {
-    listStyleType: 'none',
-    fontFamily: 'Alata',
-    display: 'flex',
-    flexDirection: 'column',
-    textAlign: 'left',
-    marginRight: '15%'
-};
-
-export const ButtonDivStyle = {
-    fontFamily: 'Alata',
-    display: 'flex',
-    justifyContent: 'center',
-}
-
-export const ButtonStyle = {
-    fontFamily: 'Alata',
-    backgroundColor: '#3a5a40',
-    color: 'white',
-    borderRadius: '20px',
-    border: 'none',
-    padding: '10px 30px',
-    margin: '10px',
-    cursor: 'pointer',
-}
-
-export const GrayButtonStyle = {
-    fontFamily: 'Alata',
-    backgroundColor: '#D9D9D9',
-    color: 'black',
-    borderRadius: '20px',
-    border: 'none',
-    padding: '10px 20px',
-    margin: '10px',
-    cursor: 'pointer',
-    display: 'flex',
-    flexDirection: 'row',
-    boxShadow: 'gray 0px 10px 10px -8px',
-}
-
-export const FormStyle = {
-    padding: '2vw',
-    paddingTop: '0px',
-    minWidth: '360px',
-}
-
-export const ItemStyle = {
-    margin: '10px 0px'
-}
-
-export const DateFieldStyle = {
-    borderRadius: '5px',
-    border: '1px solid #000000',
-    marginLeft: '10px',
-    width: '147px',
-    fontFamily: 'Alata'
-};
-
-
-export const MainContainerStyle = {
-    display: 'flex',
-    flexDirection: 'column',
-    padding: '2vw',
-    paddingTop: '0px',
-    alignItems: 'center',
-    minWidth: '360px',
-    minHeight: '150px',
-    justifyContent: 'space-between',
-}
-
-export const AddOptionsStyle = {
-    display: 'flex',
-    flexDirection: 'column',
-    alignItems: 'flex-start',
-    width: '90%',
-    padding: '10px',
-    fontFamily: 'Alata',
-    // border: '1px solid gray',
-    // borderRadius: '5px',
-    marginTop: '10px',
-    height: '200px',
-    overflow: 'auto'
-}
-
-export const ListingStyle = {
-    padding: '10px', 
-    border: '1px solid gray', 
-    width: '90%'
-}
\ No newline at end of file
+export const DefaultStyle = {
+    fontFamily: 'inherit',
+    color: 'var(--text-color)',
+};
+
+export const FieldStyle = {
+    borderRadius: 'var(--radius-md)',
+    border: '1px solid var(--border-color)',
+    backgroundColor: 'var(--surface-alt)',
+    color: 'var(--text-color)',
+    padding: 'var(--space-2) var(--space-4)',
+    marginLeft: 'var(--space-2)',
+    outline: 'none',
+    fontFamily: 'inherit',
+    fontSize: '0.95rem',
+    transition: 'all var(--timing-standard)',
+    width: '100%',
+    boxSizing: 'border-box',
+};
+
+export const SelectStyle = {
+    ...FieldStyle,
+    cursor: 'pointer',
+    appearance: 'none',
+    backgroundImage: `url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e")`,
+    backgroundRepeat: 'no-repeat',
+    backgroundPosition: 'right 0.7rem center',
+    backgroundSize: '1rem',
+    paddingRight: '2.5rem',
+};
+
+export const ListStyle = {
+    listStyleType: 'none',
+    fontFamily: 'inherit',
+    display: 'flex',
+    flexDirection: 'column',
+    textAlign: 'left',
+    marginRight: '15%',
+    width: '100%',
+};
+
+export const ButtonDivStyle = {
+    fontFamily: 'inherit',
+    display: 'flex',
+    justifyContent: 'center',
+    gap: 'var(--space-3)',
+    marginTop: 'var(--space-4)',
+}
+
+export const ButtonStyle = {
+    fontFamily: 'inherit',
+    backgroundColor: 'var(--kt-green-primary)',
+    color: 'white',
+    borderRadius: 'var(--radius-full)',
+    border: 'none',
+    padding: '10px 30px',
+    margin: 'var(--space-2)',
+    cursor: 'pointer',
+    fontWeight: '600',
+    transition: 'background-color 0.2s',
+}
+
+export const GrayButtonStyle = {
+    fontFamily: 'inherit',
+    backgroundColor: 'var(--surface-alt)',
+    color: 'var(--text-color)',
+    borderRadius: 'var(--radius-full)',
+    border: '1px solid var(--border-color)',
+    padding: '10px 20px',
+    margin: 'var(--space-2)',
+    cursor: 'pointer',
+    display: 'flex',
+    flexDirection: 'row',
+    alignItems: 'center',
+    boxShadow: 'var(--shadow-sm)',
+    fontWeight: '500',
+    transition: 'all 0.2s',
+}
+
+export const FormStyle = {
+    padding: 'var(--space-4)',
+    paddingTop: '0px',
+    minWidth: '360px',
+    width: '100%',
+}
+
+export const ItemStyle = {
+    margin: 'var(--space-3) 0px',
+    display: 'flex',
+    flexDirection: 'column',
+    gap: 'var(--space-1)',
+}
+
+export const DateFieldStyle = {
+    borderRadius: 'var(--radius-sm)',
+    border: '1px solid var(--input-border)',
+    backgroundColor: 'var(--input-bg)',
+    color: 'var(--text-color)',
+    marginLeft: 'var(--space-2)',
+    width: '150px',
+    padding: 'var(--space-1) var(--space-2)',
+    fontFamily: 'inherit',
+    outline: 'none',
+};
+
+
+export const MainContainerStyle = {
+    display: 'flex',
+    flexDirection: 'column',
+    padding: 'var(--space-6)',
+    paddingTop: '0px',
+    alignItems: 'center',
+    minWidth: '360px',
+    minHeight: '150px',
+    justifyContent: 'space-between',
+    backgroundColor: 'var(--card-bg)',
+}
+
+export const AddOptionsStyle = {
+    display: 'flex',
+    flexDirection: 'column',
+    alignItems: 'flex-start',
+    width: '100%',
+    padding: 'var(--space-3)',
+    fontFamily: 'inherit',
+    marginTop: 'var(--space-3)',
+    height: '250px',
+    overflow: 'auto',
+    border: '1px solid var(--border-color)',
+    borderRadius: 'var(--radius-md)',
+}
+
+export const ListingStyle = {
+    padding: 'var(--space-3)', 
+    border: '1px solid var(--border-color)', 
+    width: '100%',
+    marginBottom: 'var(--space-2)',
+    borderRadius: 'var(--radius-sm)',
+    backgroundColor: 'var(--surface-alt)',
+}
\ No newline at end of file
diff --git a/client/src/components/AddToTree/styles.js b/client/src/components/AddToTree/styles.js
index 1fc1663..fb4fede 100644
--- a/client/src/components/AddToTree/styles.js
+++ b/client/src/components/AddToTree/styles.js
@@ -1,101 +1,125 @@
-export const DefaultStyle = {
-    fontFamily: 'Alata',
-};
-
-export const FieldStyle = {
-    borderRadius: '5px',
-    border: '1px solid #000000',
-    marginLeft: '10px'
-};
-
-export const ListStyle = {
-    listStyleType: 'none',
-    fontFamily: 'Alata',
-    display: 'flex',
-    flexDirection: 'column',
-    alignItems: 'center',
-    padding: '10px',
-    margin: '0px'
-};
-
-export const ButtonDivStyle = {
-    fontFamily: 'Alata',
-    display: 'flex',
-    justifyContent: 'center',
-}
-
-export const ButtonStyle = {
-    fontFamily: 'Alata',
-    backgroundColor: '#3a5a40',
-    color: 'white',
-    borderRadius: '20px',
-    border: 'none',
-    padding: '10px 30px',
-    margin: '10px',
-    cursor: 'pointer',
-}
-
-export const GrayButtonStyle = {
-    fontFamily: 'Alata',
-    backgroundColor: '#D9D9D9',
-    color: 'black',
-    borderRadius: '20px',
-    border: 'none',
-    padding: '10px 20px',
-    margin: '10px',
-    cursor: 'pointer',
-    display: 'flex',
-    flexDirection: 'row',
-    boxShadow: 'gray 0px 10px 10px -8px',
-}
-
-export const FormStyle = {
-    padding: '2vw',
-    paddingTop: '0px',
-    minWidth: '100px',
-    maxWidth: '500px',
-}
-
-export const ItemStyle = {
-    display: 'flex',
-    flexDirection: 'column',
-    alignItems: 'center'
-}
-
-export const DateFieldStyle = {
-    borderRadius: '5px',
-    border: '1px solid #000000',
-    marginLeft: '10px',
-    width: '147px',
-    fontFamily: 'Alata'
-};
-
-
-export const MainContainerStyle = {
-    display: 'flex',
-    flexDirection: 'column',
-    padding: '2vw',
-    paddingTop: '0px',
-    alignItems: 'center',
-    minWidth: '360px',
-    minHeight: '150px',
-    justifyContent: 'space-between',
-}
-
-export const AddOptionsStyle = {
-    display: 'flex',
-    flexDirection: 'column',
-    alignItems: 'flex-start',
-    width: '90%',
-    padding: '10px',
-    fontFamily: 'Alata',
-    marginTop: '10px',
-    height: '20%',
-    overflow: 'auto'
-}
-
-export const ListingStyle = {
-    padding: '10px', 
-    border: '1px solid gray', 
-    width: '90%'
-}
\ No newline at end of file
+export const DefaultStyle = {
+    fontFamily: 'inherit',
+    color: 'var(--text-color)',
+};
+
+export const FieldStyle = {
+    borderRadius: 'var(--radius-sm)',
+    border: '1px solid var(--input-border)',
+    backgroundColor: 'var(--input-bg)',
+    color: 'var(--text-color)',
+    padding: 'var(--space-2) var(--space-3)',
+    marginLeft: 'var(--space-2)',
+    outline: 'none',
+    transition: 'border-color 0.2s',
+};
+
+export const ListStyle = {
+    listStyleType: 'none',
+    fontFamily: 'inherit',
+    display: 'flex',
+    flexDirection: 'column',
+    alignItems: 'center',
+    padding: 'var(--space-3)',
+    margin: '0px',
+    width: '100%',
+};
+
+export const ButtonDivStyle = {
+    fontFamily: 'inherit',
+    display: 'flex',
+    justifyContent: 'center',
+    gap: 'var(--space-3)',
+}
+
+export const ButtonStyle = {
+    fontFamily: 'inherit',
+    backgroundColor: 'var(--kt-green-primary)',
+    color: 'white',
+    borderRadius: 'var(--radius-full)',
+    border: 'none',
+    padding: '10px 30px',
+    margin: 'var(--space-2)',
+    cursor: 'pointer',
+    fontWeight: '600',
+    transition: 'background-color 0.2s',
+}
+
+export const GrayButtonStyle = {
+    fontFamily: 'inherit',
+    backgroundColor: 'var(--surface-alt)',
+    color: 'var(--text-color)',
+    borderRadius: 'var(--radius-full)',
+    border: '1px solid var(--border-color)',
+    padding: '10px 20px',
+    margin: 'var(--space-2)',
+    cursor: 'pointer',
+    display: 'flex',
+    flexDirection: 'row',
+    alignItems: 'center',
+    boxShadow: 'var(--shadow-sm)',
+    fontWeight: '500',
+    transition: 'all 0.2s',
+}
+
+export const FormStyle = {
+    padding: 'var(--space-4)',
+    paddingTop: '0px',
+    width: '100%',
+    maxWidth: '500px',
+}
+
+export const ItemStyle = {
+    display: 'flex',
+    flexDirection: 'column',
+    alignItems: 'center',
+    margin: 'var(--space-3) 0',
+}
+
+export const DateFieldStyle = {
+    borderRadius: 'var(--radius-sm)',
+    border: '1px solid var(--input-border)',
+    backgroundColor: 'var(--input-bg)',
+    color: 'var(--text-color)',
+    marginLeft: 'var(--space-2)',
+    width: '150px',
+    padding: 'var(--space-1) var(--space-2)',
+    fontFamily: 'inherit',
+    outline: 'none',
+};
+
+
+export const MainContainerStyle = {
+    display: 'flex',
+    flexDirection: 'column',
+    padding: 'var(--space-6)',
+    paddingTop: '0px',
+    alignItems: 'center',
+    minWidth: '360px',
+    minHeight: '150px',
+    justifyContent: 'space-between',
+    backgroundColor: 'var(--card-bg)',
+}
+
+export const AddOptionsStyle = {
+    display: 'flex',
+    flexDirection: 'column',
+    alignItems: 'flex-start',
+    width: '100%',
+    padding: 'var(--space-3)',
+    fontFamily: 'inherit',
+    marginTop: 'var(--space-3)',
+    height: '250px',
+    overflow: 'auto',
+    border: '1px solid var(--border-color)',
+    borderRadius: 'var(--radius-md)',
+}
+
+export const ListingStyle = {
+    padding: 'var(--space-3)', 
+    border: '1px solid var(--border-color)', 
+    width: '100%',
+    marginBottom: 'var(--space-2)',
+    borderRadius: 'var(--radius-sm)',
+    backgroundColor: 'var(--surface-alt)',
+}
\ No newline at end of file
diff --git a/client/src/components/MergeSharedTree/styles.js b/client/src/components/MergeSharedTree/styles.js
index 29c072c..b4afffe 100644
--- a/client/src/components/MergeSharedTree/styles.js
+++ b/client/src/components/MergeSharedTree/styles.js
@@ -1,50 +1,59 @@
 export const DefaultStyle = {
-    fontFamily: 'Alata',
+    fontFamily: 'inherit',
+    color: 'var(--text-color)',
 };
 
 export const ButtonDivStyle = {
-    fontFamily: 'Alata',
+    fontFamily: 'inherit',
     display: 'flex',
     justifyContent: 'center',
+    gap: 'var(--space-3)',
+    marginTop: 'var(--space-4)',
 }
 
 export const ButtonStyle = {
-    fontFamily: 'Alata',
-    backgroundColor: '#3a5a40',
+    fontFamily: 'inherit',
+    backgroundColor: 'var(--kt-green-primary)',
     color: 'white',
-    borderRadius: '10px',
+    borderRadius: 'var(--radius-md)',
     border: 'none',
     padding: '10px 30px',
-    margin: '10px',
+    margin: 'var(--space-2)',
     cursor: 'pointer',
+    fontWeight: '600',
+    transition: 'background-color 0.2s',
 }
 
 export const FormStyle = {
     paddingTop: '0px',
-    height: '500px',
+    height: '600px',
     display: 'flex',
     flexDirection: 'column',
     justifyContent: 'space-between',
-    width: 'auto'
+    width: '100%',
+    backgroundColor: 'var(--card-bg)',
 }
 
 export const ItemStyle = {
     display: 'flex',
     alignItems: 'center',
-    margin: '10px 0',
-    border: '1px solid rgb(87, 87, 87)',
-    width: '80%',
-    height: '10%',
-    padding: '10px'
+    margin: 'var(--space-2) 0',
+    border: '1px solid var(--border-color)',
+    width: '100%',
+    padding: 'var(--space-3)',
+    borderRadius: 'var(--radius-sm)',
+    backgroundColor: 'var(--surface-alt)',
+    boxSizing: 'border-box',
 }
 
 export const CheckboxListStyle = {
     display: 'flex',
     flexDirection: 'column',
     alignItems: 'center',
-    margin: '0px 30px',
-    overflow: 'scroll',
-    height: '50%',
-    border: '1px solid rgb(87, 87, 87)',
-    borderRadius: '10px'
+    margin: 'var(--space-4) 0',
+    overflowY: 'auto',
+    height: '400px',
+    border: '1px solid var(--border-color)',
+    borderRadius: 'var(--radius-md)',
+    padding: 'var(--space-2)',
 }
\ No newline at end of file
diff --git a/client/src/components/NavBar/NavBar.css b/client/src/components/NavBar/NavBar.css
index 77aa24b..e96622d 100644
--- a/client/src/components/NavBar/NavBar.css
+++ b/client/src/components/NavBar/NavBar.css
@@ -1,188 +1,202 @@
 .navbar {
-    height: 100%;
-    width: 150px;
-    background-color: #ccdfcd;
+    height: 100vh;
+    width: 220px;
+    background-color: var(--surface-alt);
     text-decoration: none;
-    /* position: fixed; */
-    justify-content: center;
-    font-family: Alata;
+    display: flex;
+    flex-direction: column;
+    font-family: inherit;
     position: fixed;
-    /* top: 0; */
-    z-index: 10;
-    text-align: center;
+    left: 0;
+    top: 0;
+    z-index: 1000;
+    transition: all var(--timing-smooth);
+    border-right: 1px solid var(--border-color);
+    padding: var(--space-8) var(--space-4);
+    box-shadow: 4px 0 15px rgba(0, 0, 0, 0.03);
+    box-sizing: border-box;
 }
 
-@media screen and (max-width: 768px) {
-    .navbar {
-        display: none;
-    }
+.nav-header {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: var(--space-3);
+    margin-bottom: var(--space-8);
 }
 
-.nested-navbar {
-    height: 100%;
-    width: 160px;
-    top: 0px;
-    background-color: #ebffec;
-    position: absolute;
-    padding-top: 30px;
-    margin-left: 85px;
-    z-index: 100;
+.nav-logo-img {
+    width: 80px;
+    height: auto;
+    filter: drop-shadow(0 4px 8px rgba(58, 90, 64, 0.1));
+}
+
+.nav-logo-text {
+    font-family: 'Aboreto', sans-serif;
+    font-size: 1.5rem;
+    font-weight: bold;
+    color: var(--kt-green-primary);
+    letter-spacing: 2px;
+    text-transform: uppercase;
+}
+
+.nav-options-list {
+    list-style: none;
+    padding: 0;
+    margin: 0;
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-2);
 }
 
 .nav-item {
-    display: block;
-    border-radius: 4px;
-    padding-top: 5px;
-    padding-left: 10px;
-    padding-right: 10px;
-    padding-bottom: 5px;
-    color: black;
-    background-color: #ccdfcd;
+    display: flex;
+    align-items: center;
+    border-radius: var(--radius-md);
+    padding: var(--space-3) var(--space-6);
+    color: var(--text-secondary);
     text-decoration: none;
-    font: Alata;
-    font-size: 16pt;
-    transition: all .5s;
+    font-size: 1rem;
+    font-weight: 500;
+    transition: all var(--timing-standard);
+    background-color: rgba(255, 255, 255, 0.5);
+    border: 1px solid rgba(58, 90, 64, 0.05);
 }
 
 .nav-item:hover {
-    background-color: #ebffec; 
+    background-color: var(--kt-green-subtle);
+    border-color: var(--kt-green-subtle);
+    color: var(--kt-green-primary);
+    transform: translateX(4px);
+    box-shadow: var(--shadow-sm);
 }
 
 .nav-item-active {
-    display: block;
-    border-radius: 4px;
-    padding-top: 5px;
-    padding-left: 10px;
-    padding-right: 10px;
-    padding-bottom: 5px;
-    background-color: #ebffec;
-    color: black;
-    text-decoration: none;
-    font-weight: bold;
-    font-size: 16pt;
+    background-color: var(--kt-green-primary);
+    color: #ffffff !important;
+    box-shadow: var(--shadow-md);
+}
+
+.nav-item-container {
+    list-style: none;
+    position: relative; /* Ensure the absolute positioned child is relative to this */
+}
+
+.nested-navbar {
+    position: absolute;
+    left: 100%; /* Position it exactly at the edge of the sidebar */
+    top: 50%;
+    transform: translateY(-50%);
+    width: 200px;
+    background-color: var(--card-bg);
+    border-radius: var(--radius-lg);
+    box-shadow: var(--shadow-lg);
+    border: 1px solid var(--border-color);
+    padding: var(--space-2);
+    z-index: 1001;
+    margin-left: -10px; /* Slight overlap to prevent a gap */
+    animation: nested-nav-in 0.3s cubic-bezier(0.4, 0, 0.2, 1) forwards;
+}
+
+/* Invisible bridge to prevent mouse-out when moving toward the menu */
+.nested-navbar::before {
+    content: '';
+    position: absolute;
+    left: -20px;
+    top: 0;
+    bottom: 0;
+    width: 20px;
+    background: transparent;
+}
+
+@keyframes nested-nav-in {
+    from {
+        opacity: 0;
+        transform: translateY(-48%) translateX(-10px);
+    }
+    to {
+        opacity: 1;
+        transform: translateY(-50%) translateX(0);
+    }
+}
+
+.nested-inner {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-1);
 }
 
 .nav-item-nested {
     display: block;
-    border-radius: 4px;
-    padding-top: 5px;
-    padding-left: 10px;
-    padding-right: 10px;
-    padding-bottom: 5px;
-    color: black;
-    background-color: #ebffec;
-    font-weight: normal;
+    border-radius: var(--radius-sm);
+    padding: var(--space-2) var(--space-4);
+    color: var(--text-secondary);
     text-decoration: none;
-    font: Alata;
-    font-size: 16pt;
+    font-size: 0.9rem;
+    transition: all var(--timing-standard);
 }
 
 .nav-item-nested:hover {
-    background-color: #ffffff;
+    background-color: var(--kt-green-soft);
+    color: var(--kt-green-primary);
 }
 
 .nav-item-nested-active {
-    display: block;
-    border-radius: 4px;
-    padding-top: 5px;
-    padding-left: 10px;
-    padding-right: 10px;
-    padding-bottom: 5px;
-    background: #ffffff;
-    color: black;
+    background-color: var(--kt-green-soft);
+    color: var(--kt-green-primary);
     font-weight: bold;
-    text-decoration: none;
-    font-size: 16pt;
 }
 
 .settings-and-help {
+    margin-top: auto;
     display: flex;
-    margin-top: 50vh;
-    margin-bottom: 5vh;
-    gap: 26%;
+    gap: var(--space-6);
     align-items: center;
+    justify-content: center;
+    padding: var(--space-6) 0;
+    border-top: 1px solid var(--border-color);
 }
 
-.settings-icon {
-    display: flex;
-    background-color: #ccdfcd;
-    margin-left: 2%;
-    height: 30px;
-    width: 30px;
-    color: black;
-}
-
-.settings-icon:hover {
-    color: #ebffec;
+.settings-icon, .help-icon {
+    display: block;
+    height: 28px;
+    width: 28px;
+    color: var(--text-muted);
+    transition: all var(--timing-standard);
+    cursor: pointer;
 }
 
-.help-icon {
-    color: black;
-    background-color: #ccdfcd;
-    height: 35px;
-    width: 30px
+.settings-icon:hover, .help-icon:hover {
+    color: var(--kt-green-primary);
+    transform: scale(1.1);
 }
 
-.help-icon:hover {
-    color: #ebffec;
+.settings-icon:hover {
+    transform: scale(1.1) rotate(30deg);
 }
 
-.divider {
-    border-bottom-width: flex;
-    border-bottom-color: #ccc;
+@media screen and (max-width: 768px) {
+    .navbar {
+        display: none;
+    }
 }
 
-/* Dark Mode Styles */
+/* Dark mode overrides */
 .dark-mode .navbar {
-    background-color: #2d2d2d;
+    background-color: var(--card-bg);
+    box-shadow: 4px 0 15px rgba(0, 0, 0, 0.4);
 }
 
 .dark-mode .nav-item {
-    background-color: #2d2d2d;
-    color: #e0e0e0;
+    background-color: rgba(255, 255, 255, 0.03);
+    border-color: rgba(255, 255, 255, 0.05);
 }
 
 .dark-mode .nav-item:hover {
-    background-color: #3a3a3a;
+    background-color: rgba(58, 90, 64, 0.2);
+    border-color: rgba(58, 90, 64, 0.3);
 }
 
 .dark-mode .nav-item-active {
-    background-color: #3a3a3a;
-    color: #e0e0e0;
-}
-
-.dark-mode .nested-navbar {
-    background-color: #3a3a3a;
-}
-
-.dark-mode .nav-item-nested {
-    background-color: #3a3a3a;
-    color: #e0e0e0;
-}
-
-.dark-mode .nav-item-nested:hover {
-    background-color: #4a4a4a;
-}
-
-.dark-mode .nav-item-nested-active {
-    background-color: #4a4a4a;
-    color: #e0e0e0;
-}
-
-.dark-mode .settings-icon {
-    background-color: #2d2d2d;
-    color: #e0e0e0;
-}
-
-.dark-mode .settings-icon:hover {
-    color: #4CAF50;
-}
-
-.dark-mode .help-icon {
-    background-color: #2d2d2d;
-    color: #e0e0e0;
-}
-
-.dark-mode .help-icon:hover {
-    color: #4CAF50;
+    background-color: var(--kt-green-primary);
 }
\ No newline at end of file
diff --git a/client/src/components/NavBar/NavBar.js b/client/src/components/NavBar/NavBar.js
index dff7e15..a0ee962 100644
--- a/client/src/components/NavBar/NavBar.js
+++ b/client/src/components/NavBar/NavBar.js
@@ -4,6 +4,7 @@ import { NavLink, useParams } from 'react-router-dom';
 import { AiOutlineSetting, AiOutlineQuestion } from 'react-icons/ai'; //this is for the settings icon and help icon
 import './NavBar.css';
 import { useCurrentUser } from '../../CurrentUserProvider'; // import the context
+import logo from '../../assets/kintreelogo-adobe.png';
 
 //ToDO: import * as styles from './styles';
 //ToDo: Add mobile version of navbar (collapsible)
@@ -16,78 +17,84 @@ function NavBar() {
 
     return (
         <nav className="navbar">
+            <div className="nav-header">
+                <img src={logo} className="nav-logo-img" alt="KinTree Logo" />
+                <div className="nav-logo-text">KinTree</div>
+            </div>
+            
             <ul className="nav-options-list">
-                
-                <NavLink to="/account" 
-                    className={({isActive}) => 
-                        isActive && Number(id) === Number(currentAccountID) ? "nav-item-active" : "nav-item"} 
-                    onClick={() => setShowNestedNav(false)}> 
-                    Account 
-                </NavLink>
-                <br></br>
-                <NavLink to="/" 
-                    className={({isActive}) => isActive ? "nav-item-active" : "nav-item"} 
-                    onClick={() => setShowNestedNav(false)}> 
-                    Home 
-                </NavLink>
-                <br></br>
-                <NavLink to="/family" 
-                    className={({isActive}) => isActive ? "nav-item-active" : "nav-item"}  
-                    onClick={() => setShowNestedNav(false)}> 
-                    Family 
-                </NavLink>
-                <br></br>
-                {/* <NavLink to="/tree" className="nav-item"> Tree </NavLink> */}
+                <li>
+                    <NavLink to="/account" 
+                        className={({isActive}) => {
+                            const isOwnAccount = !id || Number(id) === Number(currentAccountID);
+                            return isActive && isOwnAccount ? "nav-item nav-item-active" : "nav-item";
+                        }} 
+                        onClick={() => setShowNestedNav(false)}> 
+                        Account 
+                    </NavLink>
+                </li>
+                <li>
+                    <NavLink to="/" 
+                        className={({isActive}) => isActive ? "nav-item nav-item-active" : "nav-item"} 
+                        onClick={() => setShowNestedNav(false)}> 
+                        Home 
+                    </NavLink>
+                </li>
+                <li>
+                    <NavLink to="/family" 
+                        className={({isActive}) => isActive ? "nav-item nav-item-active" : "nav-item"}  
+                        onClick={() => setShowNestedNav(false)}> 
+                        Family 
+                    </NavLink>
+                </li>
                 <li 
-    className="nav-item"
-    onMouseEnter={() => setShowNestedNav(true)} 
-    onMouseLeave={() => setShowNestedNav(false)}
->
-    <NavLink 
-        to="/tree" 
-        className={({isActive}) => isActive ? "nav-item-active" : "nav-item"}
-        onClick={() => setShowNestedNav(true)}
-    >
-        Tree
-    </NavLink>
-    {showNestedNav && (
-        <div className="nested-navbar">
-            <div>
-                <NavLink 
-                    to="/tree/sharetree" 
-                    className={({isActive}) => isActive ? "nav-item-nested-active" : "nav-item-nested"} 
-                >
-                    Share Tree
-                </NavLink>
-                <br />
-                <NavLink 
-                    to="/tree/viewsharedtrees" 
-                    className={({isActive}) => isActive ? "nav-item-nested-active" : "nav-item-nested"} 
+                    className="nav-item-container"
+                    onMouseEnter={() => setShowNestedNav(true)} 
+                    onMouseLeave={() => setShowNestedNav(false)}
                 >
-                    View Shared Trees
-                </NavLink>
-            </div>
-        </div>
-    )}
-</li>
-                <br/>
-                <NavLink to="/chat" 
-                    className={({isActive}) => isActive ? "nav-item-active" : "nav-item"} 
-                    onClick={() => setShowNestedNav(false)}> 
-                    Chat  
-                </NavLink>
-
-                <div className="settings-and-help">
-                    <NavLink to="/websitesettings" >
-                        <AiOutlineSetting className="settings-icon"></AiOutlineSetting>
+                    <NavLink 
+                        to="/tree" 
+                        className={({isActive}) => isActive ? "nav-item nav-item-active" : "nav-item"}
+                        onClick={() => setShowNestedNav(true)}
+                    >
+                        Tree
                     </NavLink>
-                    <NavLink to="/help">
-                        <AiOutlineQuestion className="help-icon"></AiOutlineQuestion>
+                    {showNestedNav && (
+                        <div className="nested-navbar">
+                            <div className="nested-inner">
+                                <NavLink 
+                                    to="/tree/sharetree" 
+                                    className={({isActive}) => isActive ? "nav-item-nested-active" : "nav-item-nested"} 
+                                >
+                                    Share Tree
+                                </NavLink>
+                                <NavLink 
+                                    to="/tree/viewsharedtrees" 
+                                    className={({isActive}) => isActive ? "nav-item-nested-active" : "nav-item-nested"} 
+                                >
+                                    View Shared Trees
+                                </NavLink>
+                            </div>
+                        </div>
+                    )}
+                </li>
+                <li>
+                    <NavLink to="/chat" 
+                        className={({isActive}) => isActive ? "nav-item nav-item-active" : "nav-item"} 
+                        onClick={() => setShowNestedNav(false)}> 
+                        Chat  
                     </NavLink>
-                </div>
-                
+                </li>
             </ul>
 
+            <div className="settings-and-help">
+                <NavLink to="/websitesettings" >
+                    <AiOutlineSetting className="settings-icon" />
+                </NavLink>
+                <NavLink to="/help">
+                    <AiOutlineQuestion className="help-icon" />
+                </NavLink>
+            </div>
         </nav>
     );
 };
diff --git a/client/src/components/UserActivityDashboard/UserActivityDash.js b/client/src/components/UserActivityDashboard/UserActivityDash.js
index 5982d53..a88add2 100644
--- a/client/src/components/UserActivityDashboard/UserActivityDash.js
+++ b/client/src/components/UserActivityDashboard/UserActivityDash.js
@@ -8,7 +8,7 @@ import { EventCard } from "../UserEvents/EventCard";
 
 import CreateMemoryPopup from "../UserMemory/CreateMemory";
 import MemoryCard from "../UserMemory/MemoryCard"; 
-import { ReactComponent as PlusIcon } from "../../assets/plus-sign.svg";
+import { AiOutlinePlus } from "react-icons/ai";
 import { useCurrentUser } from "../../CurrentUserProvider";
 import { supabase } from "../../utils/supabaseClient"; 
 import { SERVER_URL } from "../../config/urls";
@@ -27,23 +27,9 @@ function Dashboard() {
   const [allMemories, setAllMemories] = useState([]); 
   
   // Pulling the Tree Member integer ID from your context
-  const { currentUserID, loading } = useCurrentUser();
+  const { currentUserID, currentAccountID, loading } = useCurrentUser();
   const [isHovering, setIsHovering] = useState(false);
 
-  const ButtonStyle = {
-    fontFamily: 'Alata',
-    backgroundColor: isHovering ? '#3a5a40' : '#ccdecc',
-    color: isHovering ? 'white' : 'black',
-    borderRadius: '10px',
-    border: 'none',
-    padding: '10px 20px',
-    cursor: 'pointer',
-    width: '45%',
-    marginLeft: '30%',
-    marginRight: '30%',
-    height: '45px'
-  };
-
   // --- FETCH EVENTS ---
   // Sort and filter events
   const fetchEvents = useCallback(async () => {
@@ -163,31 +149,26 @@ function Dashboard() {
           <input 
             style={styles.SearchBar} 
             type="text" 
-            placeholder="Search events..." 
             placeholder="Search by title or date..." 
             value={searchItem} 
             onChange={(e) => setSearchItem(e.target.value)} 
           />
 
-          <div style={styles.ButtonDivStyle}>
+          <div className="animate-in" style={styles.ActionRow}>
             <CreateEventPopup
               onEventCreated={handleEventCreated} 
               trigger={
-                <button
-                  style={ButtonStyle}
-                  onMouseEnter={() => setIsHovering(true)}
-                  onMouseLeave={() => setIsHovering(false)}
-                >
-                  Create Event
+                <button className="kt-button kt-button-primary">
+                   Create Event
                 </button>
               }
             />
             <button
-              style={{ margin: "10px" }}
+              style={styles.SortButton}
               onClick={() => setSortDate(sortDate === "newest" ? "oldest" : "newest")}
             >
-              Sort by: {sortDate === "newest" ? "Newest First" : "Oldest First"}
-              <DropDown style={{ width: "23px", height: "25px" }} />
+              Sorted by {sortDate === "newest" ? "Newest" : "Oldest"}
+              <DropDown style={{ width: "20px", height: "20px" }} />
             </button>
           </div>
 
@@ -224,7 +205,11 @@ function Dashboard() {
             )}
           </div>
         <CreateMemoryPopup 
-          trigger={<PlusIcon style={styles.PlusButton} />} 
+          trigger={
+            <div className="fab-hover" style={styles.PlusButton}>
+              <AiOutlinePlus size={30} color="white" />
+            </div>
+          } 
           onMemoryCreated={handleMemoryCreated} 
           profileID={currentUserID} 
         />
diff --git a/client/src/components/UserActivityDashboard/styles.js b/client/src/components/UserActivityDashboard/styles.js
index cfc980e..cab5f29 100644
--- a/client/src/components/UserActivityDashboard/styles.js
+++ b/client/src/components/UserActivityDashboard/styles.js
@@ -1,9 +1,11 @@
 export const DefaultStyle = {
     display: 'flex',
     flexDirection: 'row',
-    fontFamily: 'Alata',
+    fontFamily: 'inherit',
     alignItems: 'flex-start',
     textAlign: 'center',
+    backgroundColor: 'var(--bg-color)',
+    minHeight: '100vh',
 };
 
 export const RightSide = {  
@@ -17,48 +19,78 @@ export const Container = {
     flexDirection: 'column',
     alignItems: 'center',
     justifyContent: 'flex-start',
-    minWidth: '290px',
-    width: '100%',
-    borderRadius: '30px',
-    backgroundColor: '#faf9f6',
-    padding: '20px 5vw',
-    margin: '5% 20%',
-    boxShadow: 'gray 0px 10px 10px -8px',
-    border: '0.5px solid #000000',
+    minWidth: '320px',
+    width: '95%',
+    maxWidth: '1000px',
+    borderRadius: 'var(--radius-xl)',
+    backgroundColor: 'var(--card-bg)',
+    padding: 'var(--space-10) var(--space-8)',
+    margin: 'var(--space-10) auto',
+    boxShadow: 'var(--shadow-premium)',
+    border: '1px solid var(--border-color)',
+    boxSizing: 'border-box',
+    animation: 'animate-in var(--timing-smooth) forwards',
 };
 
 export const SearchBar = {
-    width: '50%',
-    padding: '10px',
+    width: '100%',
+    maxWidth: '500px',
+    padding: '10px 16px',
     margin: '20px 0',
-    border: '1px solid #ccc',
-    borderRadius: '5px',
-    fontSize: '16px'
+    border: '1px solid var(--input-border)',
+    borderRadius: 'var(--radius-md)',
+    fontSize: '16px',
+    backgroundColor: 'var(--input-bg)',
+    color: 'var(--text-color)',
+    outline: 'none',
+    transition: 'border-color 0.2s',
 };
 
 export const Header = {
-    fontSize: 'xx-large',
+    fontSize: '2.5rem',
+    fontWeight: '800',
+    color: 'var(--kt-green-primary)',
+    marginBottom: 'var(--space-2)',
+    fontFamily: 'Aboreto',
+};
+
+export const ActionRow = {
     display: 'flex',
     flexDirection: 'row',
-    alignContent: 'center',
-    justifyContent: 'center',
+    alignItems: 'center',
+    gap: 'var(--space-4)',
+    margin: 'var(--space-4) 0',
 };
 
-export const ButtonDivStyle = {
-    fontFamily: 'Alata',
+export const SortButton = {
     display: 'flex',
-    flexDirection: 'column',
     alignItems: 'center',
+    gap: 'var(--space-2)',
+    padding: 'var(--space-2) var(--space-4)',
+    borderRadius: 'var(--radius-md)',
+    border: '1px solid var(--border-color)',
+    backgroundColor: 'var(--card-bg)',
+    color: 'var(--text-secondary)',
+    cursor: 'pointer',
+    fontSize: '14px',
+    transition: 'all var(--timing-standard)',
 };
 
 export const PlusButton = {
-    width: '40px',
-    height: '40px',
-    margin: '10px',
+    width: '60px',
+    height: '60px',
+    borderRadius: 'var(--radius-full)',
+    backgroundColor: 'var(--kt-green-primary)',
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
     cursor: 'pointer',
-    position: 'absolute',
-    right: '0px',
-    bottom: '60px'
+    position: 'fixed',
+    right: '40px',
+    bottom: '40px',
+    boxShadow: 'var(--shadow-premium)',
+    transition: 'all var(--timing-standard)',
+    zIndex: '100',
 };
 
 export const ListStyle = {
diff --git a/client/src/components/UserEvents/EventCard.js b/client/src/components/UserEvents/EventCard.js
index 2414fa6..ae728db 100644
--- a/client/src/components/UserEvents/EventCard.js
+++ b/client/src/components/UserEvents/EventCard.js
@@ -37,18 +37,17 @@ export function EventCard({ event, onDeleted, onUpdated }) {
         </span>
       )}
       
-      <div style={{ display: 'flex', justifyContent: 'center', gap: '10px', marginTop: '15px' }}>
+      <div style={{ display: 'flex', justifyContent: 'flex-start', gap: '12px', marginTop: '20px' }}>
         
-        {/* 2. Pass onUpdated to the Edit popup */}
         <EditEventPopup 
           event={event} 
           onEventUpdated={onUpdated} 
-          trigger={<button style={styles.GrayButtonStyle}>Edit</button>} 
+          trigger={<button className="kt-button kt-button-primary" style={{ padding: '8px 24px' }}>Edit</button>} 
         />
 
-        {/* 3. Pass onDeleted to the Delete action */}
         <button 
-          style={{ ...styles.GrayButtonStyle, backgroundColor: '#ffcccc' }} 
+          className="kt-button"
+          style={{ backgroundColor: 'var(--surface-alt)', color: 'var(--kt-danger)', border: '1px solid var(--kt-danger)' }} 
           onClick={() => deleteEvent(event.id, onDeleted)}
         >
           Delete
diff --git a/client/src/components/UserEvents/styles.js b/client/src/components/UserEvents/styles.js
index cfef27f..bc54556 100644
--- a/client/src/components/UserEvents/styles.js
+++ b/client/src/components/UserEvents/styles.js
@@ -3,11 +3,13 @@ export const DefaultStyle = {
 };
 
 export const FieldStyle = {
-    borderRadius: '5px',
-    border: '1px solid #000000',
-    marginLeft: '10px',
-    width: '145px',
-    fontFamily: 'Alata'
+    borderRadius: 'var(--radius-sm)',
+    border: '1px solid var(--input-border)',
+    backgroundColor: 'var(--input-bg)',
+    color: 'var(--text-color)',
+    padding: 'var(--space-2) var(--space-3)',
+    fontFamily: 'inherit',
+    transition: 'border-color var(--timing-fast)'
 };
 
 export const DateFieldStyle = {
@@ -34,28 +36,30 @@ export const ButtonDivStyle = {
 };
 
 export const ButtonStyle = {
-    fontFamily: 'Alata',
-    backgroundColor: '#3a5a40',
+    fontFamily: 'inherit',
+    backgroundColor: 'var(--kt-green-primary)',
     color: 'white',
-    borderRadius: '10px',
+    borderRadius: 'var(--radius-md)',
     border: 'none',
     padding: '10px 30px',
-    margin: '10px',
+    margin: 'var(--space-2)',
     cursor: 'pointer',
+    fontWeight: '600',
+    transition: 'all var(--timing-standard)',
+    boxShadow: 'var(--shadow-sm)'
 };
 
 export const GrayButtonStyle = {
-    fontFamily: 'Alata',
-    backgroundColor: '#D9D9D9',
-    color: 'black',
-    borderRadius: '10px',
-    border: 'none',
-    padding: '10px 20px',
-    margin: '10px',
+    fontFamily: 'inherit',
+    backgroundColor: 'var(--surface-alt)',
+    color: 'var(--text-secondary)',
+    borderRadius: 'var(--radius-md)',
+    border: '1px solid var(--border-color)',
+    padding: '8px 16px',
     cursor: 'pointer',
-    display: 'flex',
-    flexDirection: 'row',
-    boxShadow: 'gray 0px 10px 10px -8px',
+    fontSize: '0.9rem',
+    fontWeight: '600',
+    transition: 'all var(--timing-standard)',
 };
 
 export const FormStyle = {
@@ -87,23 +91,72 @@ export const TextAreaStyle = {
     boxSizing: 'border-box',
 };
 
+export const EventsContainer = {
+    display: 'flex',
+    flexDirection: 'column',
+    gap: 'var(--space-4)',
+    fontFamily: 'inherit',
+    color: 'var(--text-color)',
+};
+
+export const EventCard = {
+    backgroundColor: 'var(--card-bg)',
+    borderRadius: 'var(--radius-md)',
+    padding: 'var(--space-5)',
+    border: '1px solid var(--border-color)',
+    boxShadow: 'var(--shadow-md)',
+    fontFamily: 'inherit',
+    transition: 'transform var(--timing-standard), box-shadow var(--timing-standard)',
+    cursor: 'pointer',
+    animation: 'animate-in var(--timing-smooth) forwards'
+};
+
+export const EventTitle = {
+    margin: 0,
+    fontSize: '18px',
+    fontWeight: '600',
+    color: 'var(--kt-green-primary)',
+    fontFamily: 'inherit',
+};
+
+export const EventMeta = {
+    fontSize: '14px',
+    color: 'var(--text-secondary)',
+    marginTop: 'var(--space-1)',
+    fontFamily: 'inherit',
+};
+
 // --- MOVED FROM ACTIVITYDASHBOARD STYLES ---
 
+export const SearchBar = {
+    width: '100%',
+    maxWidth: '500px',
+    padding: '12px 20px',
+    margin: 'var(--space-6) 0',
+    border: '2px solid var(--border-color)',
+    borderRadius: 'var(--radius-full)',
+    fontSize: '1rem',
+    backgroundColor: 'var(--input-bg)',
+    color: 'var(--text-color)',
+    outline: 'none',
+    transition: 'all var(--timing-standard)',
+    boxShadow: 'inset 0 2px 4px rgba(0,0,0,0.02)',
+};
+
 export const CardContainer = {
     display: 'flex',
     flexDirection: 'column',
-    textAlign: 'center',
-    minWidth: '290px',
+    textAlign: 'left',
     width: '100%',
-    height: 'auto',
-    minHeight: '120px',
-    borderRadius: '20px',
-    backgroundColor: '#faf9f6',
-    padding: '20px 5vw',
-    marginTop: '20px',
-    boxShadow: 'gray 0px 10px 10px -8px',
-    border: '0.5px solid #000000',
-    boxSizing: 'border-box'
+    maxWidth: '600px',
+    borderRadius: 'var(--radius-lg)',
+    backgroundColor: 'var(--card-bg)',
+    padding: 'var(--space-6) var(--space-8)',
+    boxShadow: 'var(--shadow-md)',
+    border: '1px solid var(--border-color)',
+    boxSizing: 'border-box',
+    animation: 'animate-in var(--timing-smooth) forwards',
+    transition: 'transform var(--timing-standard)',
 };
 
 export const TextStyle = {
diff --git a/client/src/components/UserMemory/styles.js b/client/src/components/UserMemory/styles.js
index af0ff88..7df5abb 100644
--- a/client/src/components/UserMemory/styles.js
+++ b/client/src/components/UserMemory/styles.js
@@ -1,72 +1,93 @@
 export const DefaultStyle = {
-    fontFamily: 'Alata',
+    fontFamily: 'inherit',
+    color: 'var(--text-color)',
 };
 
 export const FieldStyle = {
-    borderRadius: '5px',
-    border: '1px solid #000000',
-    marginLeft: '10px',
+    borderRadius: 'var(--radius-sm)',
+    border: '1px solid var(--input-border)',
+    backgroundColor: 'var(--input-bg)',
+    color: 'var(--text-color)',
+    padding: 'var(--space-2) var(--space-3)',
+    marginLeft: 'var(--space-2)',
     width: '145px',
-    fontFamily: 'Alata'
+    fontFamily: 'inherit',
+    outline: 'none',
+    transition: 'border-color 0.2s',
 };
 
 export const DateFieldStyle = {
-    borderRadius: '5px',
-    border: '1px solid #000000',
-    marginLeft: '10px',
-    width: '147px',
-    fontFamily: 'Alata'
+    borderRadius: 'var(--radius-sm)',
+    border: '1px solid var(--input-border)',
+    backgroundColor: 'var(--input-bg)',
+    color: 'var(--text-color)',
+    padding: 'var(--space-2) var(--space-3)',
+    marginLeft: 'var(--space-2)',
+    width: '150px',
+    fontFamily: 'inherit',
+    outline: 'none',
 };
 
 export const ListStyle = {
     listStyleType: 'none',
-    fontFamily: 'Alata',
+    fontFamily: 'inherit',
     display: 'flex',
     flexDirection: 'column',
     alignItems: 'center',
-    // marginRight: '15%',
-    padding: '0px'
+    padding: '0px',
+    width: '100%',
 };
 
 export const ButtonDivStyle = {
-    fontFamily: 'Alata',
+    fontFamily: 'inherit',
     display: 'flex',
     justifyContent: 'center',
+    gap: 'var(--space-3)',
+    marginTop: 'var(--space-4)',
 }
 
 export const ButtonStyle = {
-    fontFamily: 'Alata',
-    backgroundColor: '#3a5a40',
+    fontFamily: 'inherit',
+    backgroundColor: 'var(--kt-green-primary)',
     color: 'white',
-    borderRadius: '10px',
+    borderRadius: 'var(--radius-md)',
     border: 'none',
     padding: '10px 30px',
-    margin: '10px',
+    margin: 'var(--space-2)',
     cursor: 'pointer',
+    fontWeight: '600',
+    transition: 'background-color 0.2s',
 }
 
 export const GrayButtonStyle = {
-    fontFamily: 'Alata',
-    backgroundColor: '#D9D9D9',
-    color: 'black',
-    borderRadius: '10px',
-    border: 'none',
+    fontFamily: 'inherit',
+    backgroundColor: 'var(--surface-alt)',
+    color: 'var(--text-color)',
+    borderRadius: 'var(--radius-md)',
+    border: '1px solid var(--border-color)',
     padding: '10px 20px',
-    margin: '10px',
+    margin: 'var(--space-2)',
     cursor: 'pointer',
     display: 'flex',
     flexDirection: 'row',
-    boxShadow: 'gray 0px 10px 10px -8px',
+    alignItems: 'center',
+    boxShadow: 'var(--shadow-sm)',
+    fontWeight: '500',
+    transition: 'all 0.2s',
 }
 
 export const FormStyle = {
-    // padding: '2vw',
+    padding: 'var(--space-4)',
     paddingTop: '0px',
     minWidth: '360px',
+    width: '100%',
 }
 
 export const ItemStyle = {
-    margin: '10px 0px'
+    margin: 'var(--space-3) 0px',
+    display: 'flex',
+    flexDirection: 'column',
+    gap: 'var(--space-1)',
 }
 
 export const FileUploadDefault = {
@@ -77,15 +98,21 @@ export const DateSection = {
     display: 'flex',
     flexDirection: 'column',
     alignItems: 'center',
-    width: '100%'
+    width: '100%',
+    gap: 'var(--space-2)',
 }
 
 export const TextAreaStyle = {
-    borderRadius: '5px',
-    border: '1px solid #000000',
-    // marginLeft: '10px',
+    borderRadius: 'var(--radius-sm)',
+    border: '1px solid var(--input-border)',
+    backgroundColor: 'var(--input-bg)',
+    color: 'var(--text-color)',
     width: '100%',
-    height: '100%',
-    fontFamily: 'Alata',
+    minHeight: '120px',
+    padding: 'var(--space-3)',
+    fontFamily: 'inherit',
     boxSizing: 'border-box',
+    outline: 'none',
+    transition: 'border-color 0.2s',
+    resize: 'vertical',
 }
\ No newline at end of file
diff --git a/client/src/index.css b/client/src/index.css
index a693625..6936d93 100644
--- a/client/src/index.css
+++ b/client/src/index.css
@@ -1,31 +1,185 @@
 :root {
-  --bg-color: #E7F2D8;
-  --text-color: #000000;
+  /* Brand Colors */
+  --kt-green-primary: #3a5a40;
+  --kt-green-dark: #344e41;
+  --kt-green-light: #e7f3e1;
+  --kt-green-accent: #a3b18a;
+  
+  /* Semantic Colors */
+  --kt-success: #065f46;
+  --kt-danger: #b42318;
+  --kt-warning: #f59e0b;
+  --kt-info: #3b82f6;
+
+  /* Neutrals (Light Mode) */
+  --bg-color: #f3f8f1; /* Soft KinTree Green */
+  --text-color: #1a1f16;
+  --text-secondary: #4a5542;
+  --text-muted: #858f7c;
   --card-bg: #ffffff;
-  --border-color: #ddd;
+  --border-color: #e2e8df;
   --input-bg: #ffffff;
-  --input-border: #ccc;
+  --input-border: #dce3d9;
+  
+  /* Organic Accents */
+  --kt-green-soft: rgba(58, 90, 64, 0.05);
+  --kt-green-subtle: rgba(58, 90, 64, 0.1);
+  
+  /* Surface */
+  --surface-alt: #eef3eb;
+  
+  /* Elevation - Soft Multi-layered Shadows */
+  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+  --shadow-md: 0 4px 12px -2px rgba(58, 90, 64, 0.08), 0 2px 4px -2px rgba(58, 90, 64, 0.04);
+  --shadow-lg: 0 12px 24px -4px rgba(58, 90, 64, 0.12), 0 4px 8px -2px rgba(58, 90, 64, 0.06);
+  --shadow-premium: 0 25px 50px -12px rgba(58, 90, 64, 0.15);
+  
+  /* Radius */
+  --radius-sm: 8px;
+  --radius-md: 12px;
+  --radius-lg: 20px;
+  --radius-xl: 32px;
+  --radius-full: 9999px;
+
+  /* Spacing Base (4px) */
+  --space-1: 4px;
+  --space-2: 8px;
+  --space-3: 12px;
+  --space-4: 16px;
+  --space-5: 20px;
+  --space-6: 24px;
+  --space-8: 32px;
+  --space-10: 40px;
+
+  /* Timing */
+  --timing-standard: 0.2s ease;
+  --timing-smooth: 0.4s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+@keyframes animate-in {
+  from {
+    opacity: 0;
+    transform: translateY(10px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+.animate-in {
+  animation: animate-in var(--timing-smooth) forwards;
 }
 
 .dark-mode {
-  --bg-color: #1a1a1a;
-  --text-color: #e0e0e0;
-  --card-bg: #2d2d2d;
-  --border-color: #444;
-  --input-bg: #3a3a3a;
-  --input-border: #555;
+  /* Neutrals (Dark Mode) */
+  --bg-color: #121410;
+  --text-color: #f1f3ef;
+  --text-secondary: #a7af9f;
+  --text-muted: #6a7362;
+  --card-bg: #1a1d17;
+  --border-color: #2c3328;
+  --input-bg: #1e221b;
+  --input-border: #353d30;
+  
+  --surface-alt: #1a1f16;
+  
+  --shadow-lg: 0 10px 40px rgba(0, 0, 0, 0.4);
+  --shadow-premium: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
 }
 
 body {
   margin: 0;
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
+  font-family: 'Alata', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
     'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
     sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   background-color: var(--bg-color);
   color: var(--text-color);
-  transition: background-color 0.3s ease, color 0.3s ease;
+  transition: background-color var(--timing-smooth), color var(--timing-smooth);
+}
+
+/* Base Component Classes for consistency */
+.kt-button {
+  font-family: inherit;
+  font-weight: 600;
+  border-radius: var(--radius-md);
+  border: none;
+  padding: var(--space-2) var(--space-6);
+  cursor: pointer;
+  transition: all var(--timing-standard);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--space-2);
+}
+
+.kt-button:active {
+  transform: scale(0.98);
+}
+
+.kt-button-primary {
+  background-color: var(--kt-green-primary);
+  color: #ffffff;
+  box-shadow: 0 2px 4px rgba(58, 90, 64, 0.2);
+}
+
+.kt-button-primary:hover {
+  background-color: var(--kt-green-dark);
+  transform: translateY(-1px);
+  box-shadow: 0 4px 8px rgba(58, 90, 64, 0.3);
+}
+
+.kt-button-ghost {
+  background-color: transparent;
+  color: var(--text-secondary);
+}
+
+.kt-button-ghost:hover {
+  background-color: var(--kt-green-soft);
+  color: var(--kt-green-primary);
+}
+
+/* Semantic Ghost Variants */
+.kt-button-ghost-success {
+  color: var(--kt-green-primary);
+}
+.kt-button-ghost-success:hover {
+  background-color: var(--kt-green-soft);
+  color: var(--kt-green-dark);
+}
+
+.kt-button-ghost-danger {
+  color: var(--kt-danger);
+}
+.kt-button-ghost-danger:hover {
+  background-color: rgba(180, 35, 24, 0.05);
+  color: var(--kt-danger);
+}
+
+.kt-button-danger {
+  background-color: transparent;
+  color: var(--kt-danger);
+}
+
+.kt-button-danger:hover {
+  background-color: rgba(180, 35, 24, 0.05);
+  color: var(--kt-danger);
+  transform: scale(1.1);
+}
+
+.kt-card {
+  background-color: var(--card-bg);
+  border-radius: var(--radius-lg);
+  box-shadow: var(--shadow-md);
+  border: 1px solid var(--border-color);
+  transition: transform var(--timing-standard), box-shadow var(--timing-standard);
+}
+
+.kt-card-interactive:hover {
+  transform: translateY(-2px);
+  box-shadow: var(--shadow-lg);
 }
 
 code {
@@ -33,6 +187,40 @@ code {
     monospace;
 }
 
+/* Organic Scrollbars */
+::-webkit-scrollbar {
+  width: 8px;
+  height: 8px;
+}
+
+::-webkit-scrollbar-track {
+  background: var(--bg-color);
+}
+
+::-webkit-scrollbar-thumb {
+  background: var(--kt-green-accent);
+  border-radius: var(--radius-full);
+  border: 2px solid var(--bg-color);
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background: var(--kt-green-primary);
+}
+
+input:focus {
+  border-color: var(--kt-green-primary) !important;
+  box-shadow: 0 0 0 4px var(--kt-green-subtle) !important;
+}
+
+.kt-card:hover {
+  box-shadow: var(--shadow-lg);
+}
+
+.fab-hover:hover {
+  transform: scale(1.1) translateY(-2px);
+  filter: brightness(1.1);
+}
+
 /* adapted from https://stackoverflow.com/questions/41676054/how-to-add-fonts-to-create-react-app-based-projects */
 @font-face {
   font-family: 'Alata';
diff --git a/client/src/pages/Account/styles.js b/client/src/pages/Account/styles.js
index 73981d4..77c32ac 100644
--- a/client/src/pages/Account/styles.js
+++ b/client/src/pages/Account/styles.js
@@ -1,512 +1,538 @@
-export const DefaultStyle = {
-    display: 'flex',
-    flexDirection: 'column',
-    fontFamily: 'Alata',
-    backgroundColor: '#E7F2D8',
-    minHeight: '100vh'
-};
-
-export const RightSide = {
-    display: 'flex',
-    justifyContent: 'center',
-    padding: '40px 0 64px 0'
-};
-
-export const ContainerStyle = {
-    display: 'flex',
-    flexDirection: 'column',
-    alignItems: 'stretch',
-    justifyContent: 'flex-start',
-    width: '92%',
-    maxWidth: '980px',
-    gap: '28px'
-};
-
-export const HeaderStyle = {
-    fontFamily: 'Aboreto',
-    margin: '0px',
-    fontSize: '32px',
-    color: '#1f2933'
-};
-
-export const HeadingContentStyle = {
-    display: 'flex',
-    flexDirection: 'column',
-    width: '100%',
-    gap: '20px',
-    padding: '0 24px'
-};
-
-export const HeaderDivider = {
-    width: '100%',
-    border: '0',
-    borderTop: '1px solid #d1d5db',
-    margin: '0'
-};
-
-export const PageHeader = {
-    display: 'flex',
-    width: '100%',
-    justifyContent: 'space-between',
-    alignItems: 'flex-start',
-    gap: '24px'
-};
-
-export const PageHeaderCopy = {
-    display: 'flex',
-    flexDirection: 'column',
-    gap: '6px'
-};
-
-export const PageTagline = {
-    margin: 0,
-    fontSize: '14px',
-    color: '#4b5563'
-};
-
-export const PageLocation = {
-    margin: 0,
-    fontSize: '14px',
-    color: '#6b7280'
-};
-
-export const GreenButtonStyle = {
-    fontFamily: 'Alata',
-    backgroundColor: '#3a5a40',
-    color: 'white',
-    borderRadius: '10px',
-    border: 'none',
-    padding: '10px 20px',
-    margin: '5px 0',
-    cursor: 'pointer',
-    width: 'auto',
-    minWidth: '140px',
-    height: '42px'
-}
-
-export const DisabledGreenButtonStyle = {
-    fontFamily: 'Alata',
-    backgroundColor: 'gray',
-    color: 'white',
-    borderRadius: '10px',
-    border: 'none',
-    padding: '10px 20px',
-    margin: '5px 0',
-    cursor: 'not-allowed',
-    width: 'auto',
-    minWidth: '140px',
-    height: '42px'
-}
-
-export const ButtonGroupStyle = {
-    display: 'flex',
-    flexDirection: 'row',
-    alignItems: 'center',
-    gap: '10px',
-    margin: '10px 0'
-};
-
-export const FieldStyle = {
-    fontFamily: 'Alata',
-    padding: '10px 12px',
-    borderRadius: '8px',
-    border: '1px solid #cbd5e1',
-    backgroundColor: '#fff',
-    transition: 'border-color 0.2s ease, box-shadow 0.2s ease',
-    outline: 'none'
-}
-
-export const CardStyle = {
-    width: '100%',
-    backgroundColor: '#ffffff',
-    borderRadius: '18px',
-    border: '1px solid #e2e8f0',
-    padding: '28px 32px',
-    boxShadow: '0 12px 28px rgba(58, 90, 64, 0.1)',
-    display: 'flex',
-    flexDirection: 'column',
-    gap: '20px'
-};
-
-export const CardHeader = {
-    display: 'flex',
-    justifyContent: 'space-between',
-    alignItems: 'flex-start',
-    gap: '12px'
-};
-
-export const CardTitle = {
-    margin: 0,
-    fontFamily: 'Alata',
-    fontSize: '20px',
-    color: '#1f2933'
-};
-
-export const CardSubtitle = {
-    margin: '4px 0 0 0',
-    fontSize: '14px',
-    color: '#6b7280',
-    fontFamily: 'Alata'
-};
-
-export const EditButton = {
-    fontFamily: 'Alata',
-    backgroundColor: '#ffffff',
-    color: '#3a5a40',
-    borderRadius: '999px',
-    border: '1px solid #3a5a40',
-    padding: '8px 16px',
-    cursor: 'pointer',
-    fontSize: '14px',
-    transition: 'all 0.2s ease'
-};
-
-export const ProfileCardBody = {
-    display: 'flex',
-    flexDirection: 'row',
-    gap: '24px',
-    flexWrap: 'wrap',
-    alignItems: 'center'
-};
-
-export const AvatarBlock = {
-    display: 'flex',
-    gap: '18px',
-    alignItems: 'center'
-};
-
-export const AvatarWrapper = {
-    position: 'relative',
-    display: 'flex',
-    flexDirection: 'column',
-    gap: '12px',
-    alignItems: 'center'
-};
-
-export const AvatarImage = {
-    width: '96px',
-    height: '96px',
-    borderRadius: '50%',
-    objectFit: 'cover',
-    border: '4px solid #3a5a40'
-};
-
-export const AvatarFallback = {
-    width: '96px',
-    height: '96px',
-    borderRadius: '50%',
-    backgroundColor: '#d1e7dd',
-    color: '#3a5a40',
-    display: 'flex',
-    alignItems: 'center',
-    justifyContent: 'center',
-    fontSize: '34px',
-    fontWeight: 600
-};
-
-export const AvatarAction = {
-    fontFamily: 'Alata',
-    padding: '7px 16px',
-    borderRadius: '999px',
-    border: '1px solid #3a5a40',
-    backgroundColor: '#ffffff',
-    color: '#3a5a40',
-    cursor: 'pointer',
-    fontSize: '13px'
-};
-
-export const ProfileSummary = {
-    display: 'flex',
-    flexDirection: 'column',
-    gap: '10px',
-    minWidth: '220px'
-};
-
-export const ProfileName = {
-    margin: 0,
-    fontFamily: 'Alata',
-    fontSize: '26px',
-    color: '#1f2933'
-};
-
-export const ProfileMeta = {
-    display: 'flex',
-    gap: '10px',
-    flexWrap: 'wrap',
-    color: '#4b5563',
-    fontSize: '15px',
-    fontFamily: 'Alata'
-};
-
-export const HeaderActionGroup = {
-    display: 'flex',
-    alignItems: 'center',
-    gap: '10px'
-};
-
-export const PrimaryButton = {
-    fontFamily: 'Alata',
-    backgroundColor: '#3a5a40',
-    color: '#ffffff',
-    border: 'none',
-    borderRadius: '10px',
-    padding: '8px 18px',
-    cursor: 'pointer',
-    fontSize: '14px'
-};
-
-export const TertiaryButton = {
-    fontFamily: 'Alata',
-    backgroundColor: '#ffffff',
-    color: '#3a5a40',
-    border: '1px solid #cbd5e1',
-    borderRadius: '10px',
-    padding: '8px 16px',
-    cursor: 'pointer',
-    fontSize: '14px'
-};
-
-export const SecondaryButton = {
-    fontFamily: 'Alata',
-    backgroundColor: '#edf2ee',
-    color: '#27412e',
-    border: '1px solid #3a5a40',
-    borderRadius: '10px',
-    padding: '8px 18px',
-    cursor: 'pointer',
-    fontSize: '14px'
-};
-
-export const DangerButton = {
-    fontFamily: 'Alata',
-    backgroundColor: '#b42318',
-    color: '#ffffff',
-    border: 'none',
-    borderRadius: '10px',
-    padding: '10px 20px',
-    cursor: 'pointer',
-    fontSize: '14px'
-};
-
-export const FormGrid = {
-    display: 'grid',
-    gridTemplateColumns: 'repeat(auto-fit, minmax(280px, 1fr))',
-    gap: '16px'
-};
-
-export const FieldColumn = {
-    display: 'flex',
-    flexDirection: 'column',
-    gap: '6px'
-};
-
-export const FieldColumnFull = {
-    gridColumn: '1 / -1',
-    display: 'flex',
-    flexDirection: 'column',
-    gap: '6px'
-};
-
-export const FieldLabel = {
-    fontFamily: 'Alata',
-    fontSize: '13px',
-    color: '#4b5563'
-};
-
-export const ReadOnlyGrid = {
-    display: 'grid',
-    gridTemplateColumns: 'repeat(auto-fit, minmax(240px, 1fr))',
-    gap: '16px'
-};
-
-export const ReadOnlyColumn = {
-    display: 'flex',
-    flexDirection: 'column',
-    gap: '4px'
-};
-
-export const ReadOnlyColumnFull = {
-    gridColumn: '1 / -1',
-    display: 'flex',
-    flexDirection: 'column',
-    gap: '4px'
-};
-
-export const ReadOnlyLabel = {
-    fontFamily: 'Alata',
-    fontSize: '13px',
-    color: '#6b7280'
-};
-
-export const ReadOnlyValue = {
-    fontFamily: 'Alata',
-    fontSize: '15px',
-    color: '#1f2933'
-};
-
-export const SecurityContent = {
-    display: 'grid',
-    gridTemplateColumns: 'repeat(auto-fit, minmax(260px, 1fr))',
-    gap: '18px'
-};
-
-export const SecurityBlock = {
-    display: 'flex',
-    flexDirection: 'column',
-    gap: '12px',
-    padding: '4px 0'
-};
-
-export const SecurityHeadingRow = {
-    display: 'flex',
-    alignItems: 'center',
-    justifyContent: 'space-between',
-    gap: '12px'
-};
-
-export const SecurityTitle = {
-    margin: 0,
-    fontFamily: 'Alata',
-    fontSize: '18px',
-    color: '#1f2933'
-};
-
-export const HelpText = {
-    margin: 0,
-    fontSize: '13px',
-    color: '#4b5563',
-    lineHeight: 1.5
-};
-
-export const StatusPillBase = {
-    fontFamily: 'Alata',
-    fontSize: '12px',
-    padding: '4px 10px',
-    borderRadius: '999px'
-};
-
-export const StatusPillSuccess = {
-    ...StatusPillBase,
-    backgroundColor: '#d1fae5',
-    color: '#065f46',
-    border: '1px solid #34d399'
-};
-
-export const StatusPillMuted = {
-    ...StatusPillBase,
-    backgroundColor: '#f1f5f9',
-    color: '#475569',
-    border: '1px solid #cbd5e1'
-};
-
-export const SecurityActions = {
-    display: 'flex',
-    flexWrap: 'wrap',
-    gap: '10px',
-    alignItems: 'center'
-};
-
-export const SecuritySteps = {
-    display: 'flex',
-    flexDirection: 'column',
-    gap: '12px'
-};
-
-export const TotpQr = {
-    width: '140px',
-    height: '140px',
-    borderRadius: '12px',
-    border: '1px solid #d1d5db',
-    alignSelf: 'flex-start'
-};
-
-export const DangerNote = {
-    margin: 0,
-    fontSize: '13px',
-    color: '#8a1c15',
-    lineHeight: 1.5
-};
-
-export const ErrorBanner = {
-    color: '#9b1c1c',
-    backgroundColor: '#fde8e8',
-    padding: '12px',
-    borderRadius: '8px',
-    fontSize: '13px'
-};
-
-export const SuccessBanner = {
-    color: '#0f5132',
-    backgroundColor: '#d1e7dd',
-    padding: '12px',
-    borderRadius: '8px',
-    fontSize: '13px'
-};
-
-export const ModalOverlay = {
-    position: 'fixed',
-    top: 0,
-    left: 0,
-    right: 0,
-    bottom: 0,
-    backgroundColor: 'rgba(0, 0, 0, 0.6)',
-    display: 'flex',
-    alignItems: 'center',
-    justifyContent: 'center',
-    zIndex: 1000
-};
-
-export const ModalContent = {
-    backgroundColor: '#ffffff',
-    borderRadius: '16px',
-    padding: '32px',
-    maxWidth: '500px',
-    width: '90%',
-    maxHeight: '90vh',
-    overflowY: 'auto',
-    boxShadow: '0 20px 60px rgba(0, 0, 0, 0.3)',
-    display: 'flex',
-    flexDirection: 'column',
-    gap: '20px'
-};
-
-export const ModalTitle = {
-    margin: 0,
-    fontFamily: 'Alata',
-    fontSize: '24px',
-    color: '#1f2933',
-    fontWeight: 'bold'
-};
-
-export const ModalMessage = {
-    margin: 0,
-    fontFamily: 'Alata',
-    fontSize: '15px',
-    color: '#374151',
-    lineHeight: 1.6
-};
-
-export const ModalWarning = {
-    margin: 0,
-    fontFamily: 'Alata',
-    fontSize: '14px',
-    color: '#8a1c15',
-    fontWeight: '600',
-    marginTop: '8px'
-};
-
-export const ModalList = {
-    margin: 0,
-    paddingLeft: '24px',
-    fontFamily: 'Alata',
-    fontSize: '14px',
-    color: '#4b5563',
-    lineHeight: 1.8
-};
-
-export const ModalActions = {
-    display: 'flex',
-    gap: '12px',
-    justifyContent: 'flex-end',
-    marginTop: '8px'
-};
\ No newline at end of file
+export const DefaultStyle = {
+    display: 'flex',
+    flexDirection: 'column',
+    fontFamily: 'inherit',
+    backgroundColor: 'var(--bg-color)',
+    minHeight: '100vh'
+};
+
+export const RightSide = {
+    display: 'flex',
+    justifyContent: 'center',
+    padding: 'var(--space-10) 0 var(--space-8) 0'
+};
+
+export const ContainerStyle = {
+    display: 'flex',
+    flexDirection: 'column',
+    alignItems: 'stretch',
+    justifyContent: 'flex-start',
+    width: '92%',
+    maxWidth: '980px',
+    gap: 'var(--space-6)'
+};
+
+export const HeaderStyle = {
+    fontFamily: '"Aboreto", sans-serif',
+    margin: '0px',
+    fontSize: '32px',
+    color: 'var(--text-color)'
+};
+
+export const HeadingContentStyle = {
+    display: 'flex',
+    flexDirection: 'column',
+    width: '100%',
+    gap: 'var(--space-5)',
+    padding: '0 var(--space-6)'
+};
+
+export const HeaderDivider = {
+    width: '100%',
+    border: '0',
+    borderTop: '1px solid var(--border-color)',
+    margin: '0'
+};
+
+export const PageHeader = {
+    display: 'flex',
+    width: '100%',
+    justifyContent: 'space-between',
+    alignItems: 'flex-start',
+    gap: 'var(--space-6)'
+};
+
+export const PageHeaderCopy = {
+    display: 'flex',
+    flexDirection: 'column',
+    gap: 'var(--space-1)'
+};
+
+export const PageTagline = {
+    margin: 0,
+    fontSize: '14px',
+    color: 'var(--text-secondary)'
+};
+
+export const PageLocation = {
+    margin: 0,
+    fontSize: '14px',
+    color: 'var(--text-muted)'
+};
+
+export const GreenButtonStyle = {
+    fontFamily: 'inherit',
+    backgroundColor: 'var(--kt-green-primary)',
+    color: 'white',
+    borderRadius: 'var(--radius-md)',
+    border: 'none',
+    padding: '10px 20px',
+    margin: '5px 0',
+    cursor: 'pointer',
+    width: 'auto',
+    minWidth: '140px',
+    height: '42px',
+    fontWeight: '600',
+    transition: 'background-color 0.2s'
+}
+
+export const DisabledGreenButtonStyle = {
+    ...GreenButtonStyle,
+    backgroundColor: 'var(--text-muted)',
+    cursor: 'not-allowed',
+    opacity: 0.6
+}
+
+export const ButtonGroupStyle = {
+    display: 'flex',
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 'var(--space-2)',
+    margin: 'var(--space-2) 0'
+};
+
+export const FieldStyle = {
+    fontFamily: 'inherit',
+    padding: '10px 12px',
+    borderRadius: 'var(--radius-sm)',
+    border: '1px solid var(--input-border)',
+    backgroundColor: 'var(--input-bg)',
+    color: 'var(--text-color)',
+    transition: 'border-color 0.2s ease, box-shadow 0.2s ease',
+    outline: 'none'
+}
+
+export const CardStyle = {
+    width: '100%',
+    backgroundColor: 'var(--card-bg)',
+    borderRadius: 'var(--radius-lg)',
+    border: '1px solid var(--border-color)',
+    padding: 'var(--space-6) var(--space-8)',
+    boxShadow: 'var(--shadow-md)',
+    display: 'flex',
+    flexDirection: 'column',
+    gap: 'var(--space-5)',
+    boxSizing: 'border-box',
+    transition: 'transform var(--timing-smooth), box-shadow var(--timing-smooth)',
+    animation: 'animate-in var(--timing-smooth) forwards'
+};
+
+export const CardHeader = {
+    display: 'flex',
+    justifyContent: 'space-between',
+    alignItems: 'flex-start',
+    gap: 'var(--space-3)'
+};
+
+export const CardTitle = {
+    margin: 0,
+    fontFamily: 'inherit',
+    fontSize: '20px',
+    color: 'var(--text-color)',
+    fontWeight: '600'
+};
+
+export const CardSubtitle = {
+    margin: '4px 0 0 0',
+    fontSize: '14px',
+    color: 'var(--text-muted)',
+    fontFamily: 'inherit'
+};
+
+export const EditButton = {
+    fontFamily: 'inherit',
+    backgroundColor: 'var(--kt-green-subtle)',
+    color: 'var(--kt-green-primary)',
+    borderRadius: 'var(--radius-full)',
+    border: '1px solid var(--kt-green-primary)',
+    padding: '8px 20px',
+    cursor: 'pointer',
+    fontSize: '13px',
+    fontWeight: '700',
+    transition: 'all var(--timing-smooth)',
+    outline: 'none',
+    boxShadow: '0 2px 4px rgba(58, 90, 64, 0.05)'
+};
+
+export const ProfileCardBody = {
+    display: 'flex',
+    flexDirection: 'row',
+    gap: 'var(--space-6)',
+    flexWrap: 'wrap',
+    alignItems: 'center'
+};
+
+export const AvatarBlock = {
+    display: 'flex',
+    gap: 'var(--space-4)',
+    alignItems: 'center'
+};
+
+export const AvatarWrapper = {
+    position: 'relative',
+    display: 'flex',
+    flexDirection: 'column',
+    gap: 'var(--space-3)',
+    alignItems: 'center'
+};
+
+export const AvatarImage = {
+    width: '96px',
+    height: '96px',
+    borderRadius: '50%',
+    objectFit: 'cover',
+    border: '4px solid var(--kt-green-primary)'
+};
+
+export const AvatarFallback = {
+    width: '96px',
+    height: '96px',
+    borderRadius: 'var(--radius-xl)',
+    backgroundColor: 'var(--kt-green-light)',
+    color: 'var(--kt-green-primary)',
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    fontSize: '34px',
+    fontWeight: '600',
+    boxShadow: 'inset 0 2px 4px rgba(0, 0, 0, 0.05)',
+    border: '2px solid var(--card-bg)'
+};
+
+export const AvatarAction = {
+    fontFamily: 'inherit',
+    padding: '7px 16px',
+    borderRadius: 'var(--radius-full)',
+    border: '1px solid var(--kt-green-primary)',
+    backgroundColor: 'var(--card-bg)',
+    color: 'var(--kt-green-primary)',
+    cursor: 'pointer',
+    fontSize: '13px',
+    fontWeight: '600'
+};
+
+export const ProfileSummary = {
+    display: 'flex',
+    flexDirection: 'column',
+    gap: 'var(--space-2)',
+    minWidth: '220px'
+};
+
+export const ProfileName = {
+    margin: 0,
+    fontFamily: 'inherit',
+    fontSize: '26px',
+    color: 'var(--text-color)',
+    fontWeight: '600'
+};
+
+export const ProfileMeta = {
+    display: 'flex',
+    gap: 'var(--space-2)',
+    flexWrap: 'wrap',
+    color: 'var(--text-secondary)',
+    fontSize: '15px',
+    fontFamily: 'inherit'
+};
+
+export const HeaderActionGroup = {
+    display: 'flex',
+    alignItems: 'center',
+    gap: 'var(--space-2)'
+};
+
+export const PrimaryButton = {
+    fontFamily: 'inherit',
+    backgroundColor: 'var(--kt-green-primary)',
+    color: '#ffffff',
+    border: 'none',
+    borderRadius: 'var(--radius-md)',
+    padding: '10px 22px',
+    cursor: 'pointer',
+    fontSize: '14px',
+    fontWeight: '600',
+    transition: 'all var(--timing-smooth)',
+    boxShadow: '0 4px 6px rgba(58, 90, 64, 0.15)',
+    display: 'inline-flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    gap: '8px'
+};
+
+export const TertiaryButton = {
+    fontFamily: 'inherit',
+    backgroundColor: 'transparent',
+    color: 'var(--text-secondary)',
+    border: '1px solid var(--border-color)',
+    borderRadius: 'var(--radius-md)',
+    padding: '8px 16px',
+    cursor: 'pointer',
+    fontSize: '14px',
+    fontWeight: '600',
+    transition: 'all 0.2s'
+};
+
+export const SecondaryButton = {
+    fontFamily: 'inherit',
+    backgroundColor: 'var(--kt-green-light)',
+    color: 'var(--kt-green-primary)',
+    border: '1px solid var(--kt-green-primary)',
+    borderRadius: 'var(--radius-md)',
+    padding: '8px 18px',
+    cursor: 'pointer',
+    fontSize: '14px',
+    fontWeight: '600'
+};
+
+export const DangerButton = {
+    fontFamily: 'inherit',
+    backgroundColor: 'var(--kt-danger)',
+    color: '#ffffff',
+    border: 'none',
+    borderRadius: 'var(--radius-md)',
+    padding: '10px 20px',
+    cursor: 'pointer',
+    fontSize: '14px',
+    fontWeight: '600'
+};
+
+export const FormGrid = {
+    display: 'grid',
+    gridTemplateColumns: 'repeat(auto-fit, minmax(280px, 1fr))',
+    gap: 'var(--space-4)'
+};
+
+export const FieldColumn = {
+    display: 'flex',
+    flexDirection: 'column',
+    gap: 'var(--space-1)'
+};
+
+export const FieldColumnFull = {
+    gridColumn: '1 / -1',
+    display: 'flex',
+    flexDirection: 'column',
+    gap: 'var(--space-1)'
+};
+
+export const FieldLabel = {
+    fontFamily: 'inherit',
+    fontSize: '13px',
+    color: 'var(--text-secondary)',
+    fontWeight: '500'
+};
+
+export const ReadOnlyGrid = {
+    display: 'grid',
+    gridTemplateColumns: 'repeat(auto-fit, minmax(240px, 1fr))',
+    gap: 'var(--space-4)'
+};
+
+export const ReadOnlyColumn = {
+    display: 'flex',
+    flexDirection: 'column',
+    gap: 'var(--space-1)'
+};
+
+export const ReadOnlyColumnFull = {
+    gridColumn: '1 / -1',
+    display: 'flex',
+    flexDirection: 'column',
+    gap: 'var(--space-1)'
+};
+
+export const ReadOnlyLabel = {
+    fontFamily: 'inherit',
+    fontSize: '13px',
+    color: 'var(--text-muted)'
+};
+
+export const ReadOnlyValue = {
+    fontFamily: 'inherit',
+    fontSize: '15px',
+    color: 'var(--text-color)'
+};
+
+export const SecurityContent = {
+    display: 'grid',
+    gridTemplateColumns: 'repeat(auto-fit, minmax(260px, 1fr))',
+    gap: 'var(--space-4)'
+};
+
+export const SecurityBlock = {
+    display: 'flex',
+    flexDirection: 'column',
+    gap: 'var(--space-3)',
+    padding: '4px 0'
+};
+
+export const SecurityHeadingRow = {
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    gap: 'var(--space-3)'
+};
+
+export const SecurityTitle = {
+    margin: 0,
+    fontFamily: 'inherit',
+    fontSize: '18px',
+    color: 'var(--text-color)',
+    fontWeight: '600'
+};
+
+export const HelpText = {
+    margin: 0,
+    fontSize: '13px',
+    color: 'var(--text-secondary)',
+    lineHeight: 1.5
+};
+
+export const StatusPillBase = {
+    fontFamily: 'inherit',
+    fontSize: '12px',
+    padding: '4px 10px',
+    borderRadius: 'var(--radius-full)',
+    fontWeight: '600'
+};
+
+export const StatusPillSuccess = {
+    ...StatusPillBase,
+    backgroundColor: 'rgba(6, 95, 70, 0.1)',
+    color: 'var(--kt-success)',
+    border: '1px solid var(--kt-success)'
+};
+
+export const StatusPillMuted = {
+    ...StatusPillBase,
+    backgroundColor: 'var(--surface-alt)',
+    color: 'var(--text-secondary)',
+    border: '1px solid var(--border-color)'
+};
+
+export const SecurityActions = {
+    display: 'flex',
+    flexWrap: 'wrap',
+    gap: 'var(--space-2)',
+    alignItems: 'center'
+};
+
+export const SecuritySteps = {
+    display: 'flex',
+    flexDirection: 'column',
+    gap: 'var(--space-3)'
+};
+
+export const TotpQr = {
+    width: '140px',
+    height: '140px',
+    borderRadius: 'var(--radius-md)',
+    border: '1px solid var(--border-color)',
+    alignSelf: 'flex-start',
+    backgroundColor: '#ffffff'
+};
+
+export const DangerNote = {
+    margin: 0,
+    fontSize: '13px',
+    color: 'var(--kt-danger)',
+    lineHeight: 1.5
+};
+
+export const ErrorBanner = {
+    color: 'var(--kt-danger)',
+    backgroundColor: 'rgba(180, 35, 24, 0.1)',
+    padding: 'var(--space-3)',
+    borderRadius: 'var(--radius-md)',
+    fontSize: '13px',
+    border: '1px solid var(--kt-danger)'
+};
+
+export const SuccessBanner = {
+    color: 'var(--kt-success)',
+    backgroundColor: 'rgba(6, 95, 70, 0.1)',
+    padding: 'var(--space-3)',
+    borderRadius: 'var(--radius-md)',
+    fontSize: '13px',
+    border: '1px solid var(--kt-success)'
+};
+
+export const ModalOverlay = {
+    position: 'fixed',
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+    backgroundColor: 'rgba(0, 0, 0, 0.6)',
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    zIndex: 1000,
+    backdropFilter: 'blur(4px)'
+};
+
+export const ModalContent = {
+    backgroundColor: 'var(--card-bg)',
+    borderRadius: 'var(--radius-lg)',
+    padding: 'var(--space-8)',
+    maxWidth: '500px',
+    width: '90%',
+    maxHeight: '90vh',
+    overflowY: 'auto',
+    boxShadow: 'var(--shadow-lg)',
+    display: 'flex',
+    flexDirection: 'column',
+    gap: 'var(--space-5)',
+    border: '1px solid var(--border-color)'
+};
+
+export const ModalTitle = {
+    margin: 0,
+    fontFamily: 'inherit',
+    fontSize: '24px',
+    color: 'var(--text-color)',
+    fontWeight: '700'
+};
+
+export const ModalMessage = {
+    margin: 0,
+    fontFamily: 'inherit',
+    fontSize: '15px',
+    color: 'var(--text-secondary)',
+    lineHeight: 1.6
+};
+
+export const ModalWarning = {
+    margin: 0,
+    fontFamily: 'inherit',
+    fontSize: '14px',
+    color: 'var(--kt-danger)',
+    fontWeight: '600',
+    marginTop: '8px'
+};
+
+export const ModalList = {
+    margin: 0,
+    paddingLeft: '24px',
+    fontFamily: 'inherit',
+    fontSize: '14px',
+    color: 'var(--text-secondary)',
+    lineHeight: 1.8
+};
+
+export const ModalActions = {
+    display: 'flex',
+    gap: 'var(--space-3)',
+    justifyContent: 'flex-end',
+    marginTop: 'var(--space-2)'
+};
\ No newline at end of file
diff --git a/client/src/pages/Chat/styles.js b/client/src/pages/Chat/styles.js
index 63f19b6..ef938df 100644
--- a/client/src/pages/Chat/styles.js
+++ b/client/src/pages/Chat/styles.js
@@ -1,7 +1,10 @@
 export const DefaultStyle = {
-    fontFamily: 'Alata',
+    fontFamily: 'inherit',
     textAlign: 'center',
     display: 'flex',
+    backgroundColor: 'var(--bg-color)',
+    minHeight: '100vh',
+    color: 'var(--text-color)',
 }
 
 export const ContainerStyle = {
@@ -9,35 +12,44 @@ export const ContainerStyle = {
     flexDirection: 'column',
     alignItems: 'flex-start',
     justifyContent: 'flex-start',
-    width: '70%',
+    width: '100%',
+    maxWidth: '900px',
     height: 'auto',
-    backgroundColor: '#f9f9f9',
-    borderRadius: '10px',
-    boxShadow: '0px 4px 6px rgba(0, 0, 0, 0.1)',
-    padding: '2%'
+    backgroundColor: 'var(--card-bg)',
+    borderRadius: 'var(--radius-lg)',
+    boxShadow: 'var(--shadow-lg)',
+    padding: 'var(--space-6)',
+    border: '1px solid var(--border-color)',
+    boxSizing: 'border-box',
 }
 
 export const RightSide = {
     display: 'flex',
-    padding: '2%',
+    padding: 'var(--space-6)',
     width: '100%',
     justifyContent: 'center',
 }
 
 export const Text = {
-    fontFamily: 'Alata',
+    fontFamily: 'inherit',
+    color: 'var(--text-color)',
 }
 
 export const Question = {
-    fontFamily: 'Alata',
+    fontFamily: 'inherit',
     fontWeight: 'bold',
+    color: 'var(--kt-green-primary)',
 }
 
 export const Title = {
-    fontFamily: 'Aboreto',
+    fontFamily: '"Aboreto", sans-serif',
+    fontSize: '32px',
+    color: 'var(--text-color)',
+    margin: '0 0 var(--space-6) 0',
 }
 
 export const List = {
     listStyleType: 'none',
     padding: '0',
+    width: '100%',
 }
\ No newline at end of file
diff --git a/client/src/pages/CreateAccount/styles.js b/client/src/pages/CreateAccount/styles.js
index d5f9991..c40b13e 100644
--- a/client/src/pages/CreateAccount/styles.js
+++ b/client/src/pages/CreateAccount/styles.js
@@ -1,112 +1,130 @@
-  export const DefaultStyle = {
-    display: 'flex',
-    flexDirection: 'column',
-    fontFamily: 'Alata',
-    alignItems: 'center',
-    backgroundColor: '#e7f2d8',
-    width: '100%'
-  };
-  
-  export const Container = {
-    display: 'flex',
-    flexDirection: 'column',
-    alignItems: 'center',
-    justifyContent: 'flex-start',
-    minWidth: '290px',
-    width: '40%',
-    height: '80vh',
-    borderRadius: '30px',
-    backgroundColor: '#faf9f6',
-    padding: '20px 5vw',
-    marginTop: '2%',
-    boxShadow: 'gray 0px 10px 10px -8px',
-    border: '0.5px solid #000000',
-  };
-  
-  export const Logo = {
-    width: '150px',
-    height: '150px'
-  };
-  
-  export const ListStyle = {
-    listStyleType: 'none',
-    fontFamily: 'Alata',
-    display: 'flex',
-    flexDirection: 'column',
-    alignItems: 'center',
-    width: 'auto',
-    padding: '0',
-  };
-  
-  export const FormStyle = {
-    padding: '2vw',
-    paddingTop: '0px',
-    width: '60%',
-    minWidth: '260px',
-    alignItems: 'center',
-    overflowY: 'scroll'
-  };
-  
-  export const ItemStyle = {
-    margin: '10px 0px',
-    display: 'flex',
-    flexDirection: 'column',
-    width: '100%'
-  };
-  
-  export const FieldStyle = {
-    borderRadius: '5px',
-    border: '1px solid #000000',
-    width: '100%',
-    height: '25px',
-    boxShadow: 'gray 0px 10px 10px -11px',
-    marginTop: '5px'
-  };
-  
-  export const Header = {
-    margin: '0',
-  };
-  
-  export const ButtonStyle = {
-    fontFamily: 'Alata',
-    backgroundColor: '#3a5a40',
-    color: 'white',
-    borderRadius: '10px',
-    border: 'none',
-    padding: '10px 20px',
-    margin: '10px',
-    cursor: 'pointer',
-    width: '60%',
-    height: '45px'
-  };
-  
-  export const WhiteButtonStyle = {
-    fontFamily: 'Alata',
-    backgroundColor: 'white',
-    color: 'black',
-    borderRadius: '10px',
-    border: '1px solid #000000',
-    margin: '10px',
-    cursor: 'pointer',
-    width: '100%',
-    height: '45px',
-    padding: '10px 20px',
-  };
-  
-  export const ButtonDivStyle = {
-    fontFamily: 'Alata',
-    display: 'flex',
-    justifyContent: 'center',
-    alignItems: 'center',
-  };
-  
-  export const TextStyle = {
-    margin: '0',
-    fontSize: '0.7em',
-    textAlign: 'center'
-  };
-  
-  export const LinkStyle = {
-    color: 'black',
-    textDecoration: 'none'
-  };
\ No newline at end of file
+export const DefaultStyle = {
+  display: 'flex',
+  flexDirection: 'column',
+  fontFamily: 'inherit',
+  alignItems: 'center',
+  backgroundColor: 'var(--bg-color)',
+  width: '100%',
+  minHeight: '100vh',
+};
+
+export const Container = {
+  display: 'flex',
+  flexDirection: 'column',
+  alignItems: 'center',
+  justifyContent: 'flex-start',
+  minWidth: '290px',
+  width: '100%',
+  maxWidth: '480px',
+  borderRadius: 'var(--radius-xl)',
+  backgroundColor: 'var(--card-bg)',
+  padding: 'var(--space-8) var(--space-10)',
+  marginTop: 'var(--space-10)',
+  boxShadow: 'var(--shadow-lg)',
+  border: '1px solid var(--border-color)',
+  boxSizing: 'border-box',
+};
+
+export const Logo = {
+  width: '100px',
+  height: 'auto',
+  marginBottom: 'var(--space-4)',
+};
+
+export const ListStyle = {
+  listStyleType: 'none',
+  fontFamily: 'inherit',
+  display: 'flex',
+  flexDirection: 'column',
+  alignItems: 'center',
+  width: '100%',
+  padding: '0',
+};
+
+export const FormStyle = {
+  width: '100%',
+  display: 'flex',
+  flexDirection: 'column',
+  alignItems: 'center',
+};
+
+export const ItemStyle = {
+  margin: 'var(--space-3) 0',
+  display: 'flex',
+  flexDirection: 'column',
+  width: '100%',
+};
+
+export const FieldStyle = {
+  borderRadius: 'var(--radius-sm)',
+  border: '1px solid var(--input-border)',
+  width: '100%',
+  height: '40px',
+  padding: '0 var(--space-3)',
+  backgroundColor: 'var(--input-bg)',
+  color: 'var(--text-color)',
+  boxShadow: 'var(--shadow-sm)',
+  marginTop: 'var(--space-1)',
+  outline: 'none',
+  transition: 'border-color 0.2s',
+};
+
+export const Header = {
+  margin: '0',
+  color: 'var(--text-color)',
+  fontSize: '24px',
+  fontWeight: '700',
+  marginBottom: 'var(--space-2)',
+};
+
+export const ButtonStyle = {
+  fontFamily: 'inherit',
+  backgroundColor: 'var(--kt-green-primary)',
+  color: 'white',
+  borderRadius: 'var(--radius-md)',
+  border: 'none',
+  padding: '12px 24px',
+  margin: 'var(--space-4) 0',
+  cursor: 'pointer',
+  width: '100%',
+  fontWeight: '600',
+  fontSize: '16px',
+  transition: 'background-color 0.2s',
+};
+
+export const WhiteButtonStyle = {
+  fontFamily: 'inherit',
+  backgroundColor: 'var(--card-bg)',
+  color: 'var(--text-color)',
+  borderRadius: 'var(--radius-md)',
+  border: '1px solid var(--border-color)',
+  margin: 'var(--space-2) 0',
+  cursor: 'pointer',
+  width: '100%',
+  padding: '12px 24px',
+  fontWeight: '600',
+  fontSize: '16px',
+  transition: 'all 0.2s',
+};
+
+export const ButtonDivStyle = {
+  fontFamily: 'inherit',
+  display: 'flex',
+  flexDirection: 'column',
+  justifyContent: 'center',
+  alignItems: 'center',
+  width: '100%',
+};
+
+export const TextStyle = {
+  margin: '0',
+  fontSize: '14px',
+  textAlign: 'center',
+  color: 'var(--text-secondary)',
+};
+
+export const LinkStyle = {
+  color: 'var(--kt-green-primary)',
+  textDecoration: 'none',
+  fontWeight: '600',
+};
\ No newline at end of file
diff --git a/client/src/pages/Family/styles.js b/client/src/pages/Family/styles.js
index 431a95e..dfe176e 100644
--- a/client/src/pages/Family/styles.js
+++ b/client/src/pages/Family/styles.js
@@ -26,13 +26,15 @@ export const ContainerStyle = {
     flexDirection: 'column',
     alignItems: 'center',
     justifyContent: 'flex-start',
-    width: '70%',
-    height: '85vh',
-    borderRadius: '30px',
-    backgroundColor: '#faf9f6',
-    padding: '20px',
-    margin: '2% 10% 10% 15%',
-    boxShadow: '0px 0px 10px rgba(0, 0, 0, 0.1)',
+    width: '92%',
+    maxWidth: '1000px',
+    minHeight: '85vh',
+    borderRadius: 'var(--radius-xl)',
+    backgroundColor: 'var(--card-bg)',
+    padding: 'var(--space-8)',
+    margin: 'var(--space-6) auto',
+    boxShadow: 'var(--shadow-premium)',
+    animation: 'animate-in var(--timing-smooth) forwards'
 }
 
 export const MemberLinkStyle = {
@@ -47,14 +49,19 @@ export const AvatarStyle = {
 }
 
 export const MemberStyle = {
-    border: '1px solid rgb(87, 87, 87)',
-    width: '80%',
-    margin: '5px 0',
-    padding: '10px',
+    backgroundColor: 'var(--bg-color)',
+    borderRadius: 'var(--radius-md)',
+    border: '1px solid var(--border-color)',
+    width: '100%',
+    maxWidth: '800px',
+    margin: 'var(--space-2) 0',
+    padding: 'var(--space-4) var(--space-6)',
     alignItems: 'center',
-    alignContent: 'flex-start',
     display: 'flex',
     justifyContent: 'space-between',
+    transition: 'all var(--timing-standard)',
+    cursor: 'pointer',
+    boxShadow: 'var(--shadow-sm)'
 }
 
 export const MemberListStyle = {
@@ -62,7 +69,10 @@ export const MemberListStyle = {
     alignItems: 'center',
     flexDirection: 'column',
     width: '100%',
-    overflow: 'auto'
+    gap: 'var(--space-2)',
+    marginTop: 'var(--space-6)',
+    overflow: 'auto',
+    padding: 'var(--space-2)'
 }
 
 export const DropdownButtonStyle = {
diff --git a/client/src/pages/Help/styles.js b/client/src/pages/Help/styles.js
index 8e2b3ac..bb686a1 100644
--- a/client/src/pages/Help/styles.js
+++ b/client/src/pages/Help/styles.js
@@ -1,7 +1,10 @@
 export const DefaultStyle = {
-    fontFamily: 'Alata',
+    fontFamily: 'inherit',
     textAlign: 'left',
     display: 'flex',
+    backgroundColor: 'var(--bg-color)',
+    minHeight: '100vh',
+    color: 'var(--text-color)',
 }
 
 export const ContainerStyle = {
@@ -9,35 +12,44 @@ export const ContainerStyle = {
     flexDirection: 'column',
     alignItems: 'flex-start',
     justifyContent: 'flex-start',
-    width: '70%',
+    width: '100%',
+    maxWidth: '900px',
     height: 'auto',
-    backgroundColor: '#f9f9f9',
-    borderRadius: '10px',
-    boxShadow: '0px 4px 6px rgba(0, 0, 0, 0.1)',
-    padding: '2%'
+    backgroundColor: 'var(--card-bg)',
+    borderRadius: 'var(--radius-lg)',
+    boxShadow: 'var(--shadow-lg)',
+    padding: 'var(--space-8)',
+    border: '1px solid var(--border-color)',
+    boxSizing: 'border-box',
 }
 
 export const RightSide = {
     display: 'flex',
-    padding: '2%',
+    padding: 'var(--space-8)',
     width: '100%',
     justifyContent: 'center',
 }
 
 export const Text = {
-    fontFamily: 'Alata',
+    fontFamily: 'inherit',
+    lineHeight: '1.6',
 }
 
 export const Question = {
-    fontFamily: 'Alata',
+    fontFamily: 'inherit',
     fontWeight: 'bold',
+    color: 'var(--kt-green-primary)',
+    marginBottom: 'var(--space-2)',
 }
 
 export const Title = {
-    fontFamily: 'Aboreto',
+    fontFamily: '"Aboreto", sans-serif',
+    fontSize: '32px',
+    margin: '0 0 var(--space-6) 0',
 }
 
 export const List = {
     listStyleType: 'none',
     padding: '0',
+    width: '100%',
 }
\ No newline at end of file
diff --git a/client/src/pages/Home/styles.js b/client/src/pages/Home/styles.js
index 335e889..290f34f 100644
--- a/client/src/pages/Home/styles.js
+++ b/client/src/pages/Home/styles.js
@@ -2,25 +2,32 @@ export const DefaultStyle = {
     display: 'flex',
     flexDirection: 'row',
     textAlign: 'center',
-    fontFamily: 'Alata'
+    fontFamily: 'inherit',
+    backgroundColor: 'var(--bg-color)',
+    minHeight: '100vh',
+    color: 'var(--text-color)',
 }
 
 export const CalendarButton = {
-    width: '40px',
-    height: '40px',
-    margin: '10px',
+    width: '44px',
+    height: '44px',
+    margin: 'var(--space-4)',
     cursor: 'pointer',
     position: 'absolute',
-    right: '0px',
-    bottom: '0px'
+    right: '20px',
+    bottom: '20px',
+    filter: 'drop-shadow(var(--shadow-md))',
+    transition: 'transform 0.2s ease',
 }
 
 export const PlusButton = {
-    width: '40px',
-    height: '40px',
-    margin: '10px',
+    width: '44px',
+    height: '44px',
+    margin: 'var(--space-4)',
     cursor: 'pointer',
     position: 'absolute',
-    right: '0px',
-    bottom: '60px'
+    right: '20px',
+    bottom: '80px',
+    filter: 'drop-shadow(var(--shadow-md))',
+    transition: 'transform 0.2s ease',
 }
\ No newline at end of file
diff --git a/client/src/pages/Login/styles.js b/client/src/pages/Login/styles.js
index 5fbdc05..3bb7292 100644
--- a/client/src/pages/Login/styles.js
+++ b/client/src/pages/Login/styles.js
@@ -1,195 +1,195 @@
-export const DefaultStyle = {
-  display: 'flex',
-  justifyContent: 'center',
-  alignItems: 'center',
-  minHeight: '100vh',
-  backgroundColor: '#e7f3e1',
-  fontFamily: '"Alata", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif',
-};
-
-export const Container = {
-  display: 'flex',
-  flexDirection: 'column',
-  width: '100%',
-  maxWidth: '440px',
-  backgroundColor: '#ffffff',
-  padding: '40px',
-  borderRadius: '24px',
-  boxShadow: '0 8px 30px rgba(0, 0, 0, 0.04)',
-  boxSizing: 'border-box',
-};
-
-export const LogoContainer = {
-  display: 'flex',
-  justifyContent: 'center',
-  marginBottom: '24px',
-};
-
-export const Logo = {
-  width: '80px',
-  height: 'auto',
-  borderRadius: '16px',
-};
-
-export const WelcomeHeader = {
-  fontSize: '24px',
-  fontWeight: '600',
-  color: '#111827',
-  textAlign: 'center',
-  margin: '0 0 8px 0',
-  fontFamily: 'inherit',
-};
-
-export const Subtitle = {
-  fontSize: '14px',
-  color: '#6b7280',
-  textAlign: 'center',
-  margin: '0 0 32px 0',
-};
-
-export const FormStyle = {
-  display: 'flex',
-  flexDirection: 'column',
-  width: '100%',
-};
-
-export const InputGroup = {
-  display: 'flex',
-  flexDirection: 'column',
-  marginBottom: '20px',
-};
-
-export const Label = {
-  fontSize: '14px',
-  fontWeight: '500',
-  color: '#374151',
-  marginBottom: '8px',
-};
-
-export const InputWrapper = {
-  position: 'relative',
-  display: 'flex',
-  alignItems: 'center',
-};
-
-export const FieldStyle = {
-  width: '100%',
-  padding: '12px 16px',
-  fontSize: '15px',
-  color: '#111827',
-  backgroundColor: '#ffffff',
-  border: '1px solid #d1d5db',
-  borderRadius: '10px',
-  outline: 'none',
-  boxSizing: 'border-box',
-  transition: 'border-color 0.2s',
-};
-
-export const EyeButton = {
-  position: 'absolute',
-  right: '12px',
-  background: 'none',
-  border: 'none',
-  cursor: 'pointer',
-  display: 'flex',
-  alignItems: 'center',
-  justifyContent: 'center',
-  color: '#9ca3af',
-  padding: '4px',
-};
-
-export const OptionsRow = {
-  display: 'flex',
-  justifyContent: 'space-between',
-  alignItems: 'center',
-  marginBottom: '24px',
-};
-
-export const CheckboxLabel = {
-  display: 'flex',
-  alignItems: 'center',
-  fontSize: '14px',
-  color: '#6b7280',
-  cursor: 'pointer',
-  userSelect: 'none',
-};
-
-export const Checkbox = {
-  marginRight: '8px',
-  width: '16px',
-  height: '16px',
-  cursor: 'pointer',
-  accentColor: '#1f2937',
-};
-
-export const ForgotPassword = {
-  fontSize: '14px',
-  fontWeight: '600',
-  color: '#3a5a40',
-  textDecoration: 'none',
-  cursor: 'pointer',
-};
-
-export const SignInButton = {
-  width: '100%',
-  padding: '12px',
-  backgroundColor: '#3a5a40', // kin tree dark green
-  color: '#ffffff',
-  fontSize: '16px',
-  fontWeight: '600',
-  border: 'none',
-  borderRadius: '10px',
-  cursor: 'pointer',
-  transition: 'background-color 0.2s',
-  marginBottom: '24px',
-};
-
-export const DividerRow = {
-  display: 'flex',
-  alignItems: 'center',
-  marginBottom: '24px',
-};
-
-export const DividerLine = {
-  flex: 1,
-  height: '1px',
-  backgroundColor: '#e5e7eb',
-};
-
-export const DividerText = {
-  margin: '0 16px',
-  fontSize: '12px',
-  color: '#9ca3af',
-};
-
-export const GoogleButton = {
-  display: 'flex',
-  alignItems: 'center',
-  justifyContent: 'center',
-  gap: '12px',
-  width: '100%',
-  padding: '12px',
-  backgroundColor: '#ffffff',
-  border: '1px solid #d1d5db',
-  borderRadius: '10px',
-  fontSize: '15px',
-  fontWeight: '500',
-  color: '#374151',
-  cursor: 'pointer',
-  transition: 'background-color 0.2s',
-  marginBottom: '32px',
-};
-
-export const RegisterRow = {
-  textAlign: 'center',
-  fontSize: '14px',
-  color: '#6b7280',
-};
-
-export const RegisterLink = {
-  fontWeight: '600',
-  color: '#3a5a40',
-  textDecoration: 'none',
-  cursor: 'pointer',
-  marginLeft: '4px',
-};
\ No newline at end of file
+export const DefaultStyle = {
+  display: 'flex',
+  justifyContent: 'center',
+  alignItems: 'center',
+  minHeight: '100vh',
+  backgroundColor: 'var(--bg-color)',
+  fontFamily: 'inherit',
+};
+
+export const Container = {
+  display: 'flex',
+  flexDirection: 'column',
+  width: '100%',
+  maxWidth: '440px',
+  backgroundColor: 'var(--card-bg)',
+  padding: 'var(--space-10)',
+  borderRadius: 'var(--radius-xl)',
+  boxShadow: 'var(--shadow-lg)',
+  boxSizing: 'border-box',
+};
+
+export const LogoContainer = {
+  display: 'flex',
+  justifyContent: 'center',
+  marginBottom: 'var(--space-6)',
+};
+
+export const Logo = {
+  width: '80px',
+  height: 'auto',
+  borderRadius: 'var(--radius-lg)',
+};
+
+export const WelcomeHeader = {
+  fontSize: '24px',
+  fontWeight: '600',
+  color: 'var(--text-color)',
+  textAlign: 'center',
+  margin: '0 0 var(--space-2) 0',
+  fontFamily: 'inherit',
+};
+
+export const Subtitle = {
+  fontSize: '14px',
+  color: 'var(--text-secondary)',
+  textAlign: 'center',
+  margin: '0 0 var(--space-8) 0',
+};
+
+export const FormStyle = {
+  display: 'flex',
+  flexDirection: 'column',
+  width: '100%',
+};
+
+export const InputGroup = {
+  display: 'flex',
+  flexDirection: 'column',
+  marginBottom: 'var(--space-5)',
+};
+
+export const Label = {
+  fontSize: '14px',
+  fontWeight: '500',
+  color: 'var(--text-secondary)',
+  marginBottom: 'var(--space-2)',
+};
+
+export const InputWrapper = {
+  position: 'relative',
+  display: 'flex',
+  alignItems: 'center',
+};
+
+export const FieldStyle = {
+  width: '100%',
+  padding: '12px 16px',
+  fontSize: '15px',
+  color: 'var(--text-color)',
+  backgroundColor: 'var(--input-bg)',
+  border: '1px solid var(--input-border)',
+  borderRadius: 'var(--radius-md)',
+  outline: 'none',
+  boxSizing: 'border-box',
+  transition: 'border-color 0.2s',
+};
+
+export const EyeButton = {
+  position: 'absolute',
+  right: '12px',
+  background: 'none',
+  border: 'none',
+  cursor: 'pointer',
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  color: 'var(--text-muted)',
+  padding: '4px',
+};
+
+export const OptionsRow = {
+  display: 'flex',
+  justifyContent: 'space-between',
+  alignItems: 'center',
+  marginBottom: 'var(--space-6)',
+};
+
+export const CheckboxLabel = {
+  display: 'flex',
+  alignItems: 'center',
+  fontSize: '14px',
+  color: 'var(--text-secondary)',
+  cursor: 'pointer',
+  userSelect: 'none',
+};
+
+export const Checkbox = {
+  marginRight: 'var(--space-2)',
+  width: '16px',
+  height: '16px',
+  cursor: 'pointer',
+  accentColor: 'var(--kt-green-primary)',
+};
+
+export const ForgotPassword = {
+  fontSize: '14px',
+  fontWeight: '600',
+  color: 'var(--kt-green-primary)',
+  textDecoration: 'none',
+  cursor: 'pointer',
+};
+
+export const SignInButton = {
+  width: '100%',
+  padding: '12px',
+  backgroundColor: 'var(--kt-green-primary)',
+  color: '#ffffff',
+  fontSize: '16px',
+  fontWeight: '600',
+  border: 'none',
+  borderRadius: 'var(--radius-md)',
+  cursor: 'pointer',
+  transition: 'background-color 0.2s',
+  marginBottom: 'var(--space-6)',
+};
+
+export const DividerRow = {
+  display: 'flex',
+  alignItems: 'center',
+  marginBottom: 'var(--space-6)',
+};
+
+export const DividerLine = {
+  flex: 1,
+  height: '1px',
+  backgroundColor: 'var(--border-color)',
+};
+
+export const DividerText = {
+  margin: '0 var(--space-4)',
+  fontSize: '12px',
+  color: 'var(--text-muted)',
+};
+
+export const GoogleButton = {
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  gap: '12px',
+  width: '100%',
+  padding: '12px',
+  backgroundColor: 'var(--card-bg)',
+  border: '1px solid var(--border-color)',
+  borderRadius: 'var(--radius-md)',
+  fontSize: '15px',
+  fontWeight: '500',
+  color: 'var(--text-color)',
+  cursor: 'pointer',
+  transition: 'background-color 0.2s',
+  marginBottom: 'var(--space-8)',
+};
+
+export const RegisterRow = {
+  textAlign: 'center',
+  fontSize: '14px',
+  color: 'var(--text-secondary)',
+};
+
+export const RegisterLink = {
+  fontWeight: '600',
+  color: 'var(--kt-green-primary)',
+  textDecoration: 'none',
+  cursor: 'pointer',
+  marginLeft: 'var(--space-1)',
+};
\ No newline at end of file
diff --git a/client/src/pages/Reset/styles.js b/client/src/pages/Reset/styles.js
index 5e2c862..80e5cd1 100644
--- a/client/src/pages/Reset/styles.js
+++ b/client/src/pages/Reset/styles.js
@@ -1,7 +1,26 @@
 export const DefaultStyle = {
-    display: 'flex',
-    flexDirection: 'column',
-    padding: '10px',
-    fontFamily: 'Alata',
-    alignItems: 'center',
-  }
\ No newline at end of file
+  display: 'flex',
+  flexDirection: 'column',
+  padding: 'var(--space-6)',
+  fontFamily: 'inherit',
+  alignItems: 'center',
+  backgroundColor: 'var(--bg-color)',
+  minHeight: '100vh',
+  color: 'var(--text-color)',
+}
+
+export const Container = {
+  display: 'flex',
+  flexDirection: 'column',
+  alignItems: 'center',
+  justifyContent: 'center',
+  minWidth: '320px',
+  width: '100%',
+  maxWidth: '400px',
+  borderRadius: 'var(--radius-lg)',
+  backgroundColor: 'var(--card-bg)',
+  padding: 'var(--space-8)',
+  marginTop: 'var(--space-10)',
+  boxShadow: 'var(--shadow-lg)',
+  border: '1px solid var(--border-color)',
+};
\ No newline at end of file
diff --git a/client/src/pages/Tree/ShareTree/ShareTree.js b/client/src/pages/Tree/ShareTree/ShareTree.js
index 6beeeb7..27f967b 100644
--- a/client/src/pages/Tree/ShareTree/ShareTree.js
+++ b/client/src/pages/Tree/ShareTree/ShareTree.js
@@ -4,12 +4,17 @@ import { useForm } from 'react-hook-form';
 import { Link } from 'react-router-dom';
 import { useCurrentUser } from '../../../CurrentUserProvider';
 import { SERVER_URL } from '../../../config/urls';
+import Popup from 'reactjs-popup';
+import 'reactjs-popup/dist/index.css';
+import { AiOutlineCheckCircle } from 'react-icons/ai';
 
 function ShareTree() {
     const [searchTerm, setSearchTerm] = useState("");
     const [inviteEmail, setInviteEmail] = useState("");
     const [emailError, setEmailError] = useState("");
     const [memberError, setMemberError] = useState("");
+    const [showSuccessModal, setShowSuccessModal] = useState(false);
+    const [modalMessage, setModalMessage] = useState("");
     
     // Use refs to store fetched data (fetch once, use many times)
     const allMembersRef = useRef([]);
@@ -61,19 +66,19 @@ function ShareTree() {
         .then(async (response) => {
             if (response.ok) {
                 let responseData = await response.json();
-                console.log(responseData);
-                alert(responseData.message);
-                window.location.href = '/';
+                setModalMessage(responseData.message || "Shared tree successfully!");
+                setShowSuccessModal(true);
             }
             else {
                 let errorData = await response.json();
-                console.log('Error:', errorData);
-                alert('Error sharing tree: ' + (errorData.error || 'Unknown error'));
+                setModalMessage('Error sharing tree: ' + (errorData.error || 'Unknown error'));
+                setShowSuccessModal(true);
             }
         })
         .catch(error => {
             console.error('Fetch error:', error);
-            alert('Error sharing tree: ' + error.message);
+            setModalMessage('Error sharing tree: ' + error.message);
+            setShowSuccessModal(true);
         });
     }
 
@@ -175,83 +180,151 @@ function ShareTree() {
         <div style={styles.DefaultStyle}>
             <div style={{width: '150px'}}></div>
             <div style={styles.RightSide}>
-            <div style={styles.ContainerStyle}>
+            <div className="animate-in" style={styles.ContainerStyle}>
                 {/* title */}
-                <h1 style={{ margin: '0px' }}>Share Tree</h1>
-                <hr style={{ width: '50%', border: '1px solid #000', margin: '1px 0' }} />
+                <h1 style={{ margin: '0px', color: 'var(--text-color)' }}>Share Tree</h1>
+                <hr style={{ width: '50px', border: 'none', height: '2px', backgroundColor: 'var(--kt-green-primary)', margin: 'var(--space-2) 0 var(--space-6) 0' }} />
 
                 {/* form */}
                 <form onSubmit={handleSubmit(data => onSubmitForm(data))} style={styles.FormStyle}>
                     <ul style={styles.ListStyle}>
                         <li style={styles.ItemStyle}>
-                        <div style={{ display: 'flex', justifyContent: 'center', width: '100%' }}>
+                            <label style={styles.LabelStyle}>Search Family</label>
                             <input
                                 type="text"
                                 placeholder="Search for a family member..."
-                                style={{ width: '100%', padding: '10px', borderRadius: '5px', border: '1px solid #ccc', fontFamily: 'Alata' }}
+                                style={styles.InputStyle}
                                 value={searchTerm}
                                 onChange={e => setSearchTerm(e.target.value)}
                             />
-                        </div>
 
-                        {/* search results for active family members (users) */}
-                        <div style={styles.AddOptionsStyle}>
-                        {searchResults?.length > 0 ? (
-                            searchResults.map(result => (
-                            <div key={result.memberuserid} style={styles.ListingStyle}>
-                                <label>
-                                <input
-                                    type="radio"
-                                    name="selectedMember"
-                                    value={result.memberuserid}
-                                    {...register("selectedMember")}
-    
-                                />
-                                <Link to={`/account/${result?.memberuserid}`} style={{ marginLeft: '10px' }}>
-                                    {result.firstname} {result.lastname}
-                                </Link>
-                                </label>
-                            </div>
-                            ))
-                        ) : searchTerm !== "" ? (
-                            <div style={styles.ListingStyle}>
-                                <label style={{ display: 'flex', flexDirection: 'column', justifyContent: 'center', width: '100%' }}>
-                                    User not found. Invite via email:
+                            {/* search results for active family members (users) */}
+                            <div style={styles.AddOptionsStyle}>
+                            {searchResults?.length > 0 ? (
+                                searchResults.map(result => (
+                                <div key={result.memberuserid} style={styles.ListingStyle} className="kt-card-interactive">
+                                    <label style={{ display: 'flex', alignItems: 'center', width: '100%', cursor: 'pointer' }}>
+                                        <input
+                                            type="radio"
+                                            name="selectedMember"
+                                            style={{ cursor: 'pointer', accentColor: 'var(--kt-green-primary)' }}
+                                            value={result.memberuserid}
+                                            {...register("selectedMember")}
+                                        />
+                                        <Link 
+                                            to={`/account/${result?.memberuserid}`} 
+                                            style={{ marginLeft: '12px', color: 'var(--text-color)', textDecoration: 'none', fontWeight: '500' }}
+                                        >
+                                            {result.firstname} {result.lastname}
+                                        </Link>
+                                    </label>
+                                </div>
+                                ))
+                            ) : searchTerm !== "" ? (
+                                <div style={{ ...styles.ListingStyle, flexDirection: 'column', alignItems: 'flex-start' }}>
+                                    <span style={{ fontSize: '0.9rem', color: 'var(--text-muted)', marginBottom: 'var(--space-2)' }}>
+                                        User not found. Invite via email:
+                                    </span>
                                     <input
                                         type="email"
                                         placeholder="Enter email address"
                                         style={{ 
-                                            width: '95%', 
-                                            padding: '10px', 
-                                            borderRadius: '5px', 
-                                            border: emailError ? '1px solid red' : '1px solid #ccc', 
-                                            fontFamily: 'Alata', 
-                                            marginTop: '5px' 
+                                            ...styles.InputStyle,
+                                            borderColor: emailError ? 'var(--kt-danger)' : 'var(--input-border)',
+                                            backgroundColor: 'var(--card-bg)'
                                         }}
                                         value={inviteEmail}
                                         onChange={handleInviteEmailChange}
                                     />
                                     {emailError && (
-                                        <div style={{ color: 'red', fontSize: '12px', marginTop: '5px' }}>
+                                        <div style={{ color: 'var(--kt-danger)', fontSize: '12px', marginTop: '4px' }}>
                                             {emailError}
                                         </div>
                                     )}
-                                </label>
+                                </div>
+                            ) : (
+                                <div style={{ textAlign: 'center', padding: 'var(--space-4)', color: 'var(--text-muted)', fontSize: '0.9rem' }}>
+                                    {searchTerm === "" ? "Start typing to find a family member..." : ""}
+                                </div>
+                            )}
                             </div>
-                        ) : null}
-                        </div>
                         </li>
+                        
                         <li style={styles.ItemStyle}>
-                            <label>
+                            <label style={styles.LabelStyle}>
                                 Comments:
                             </label>
-                            <textarea {...register("comments")} type="text" style={styles.TextAreaStyle} />
+                            <textarea 
+                                {...register("comments")} 
+                                style={styles.TextAreaStyle} 
+                                placeholder="Add a note to your invitation..."
+                            />
                         </li>
                     </ul>
-                    <button type="submit" style={styles.ButtonStyle}>Share</button>
+                    <div style={{ marginTop: 'var(--space-8)', width: '100%', display: 'flex', justifyContent: 'center' }}>
+                        <button type="submit" className="kt-button kt-button-primary" style={{ padding: '12px 40px' }}>
+                            Share Tree
+                        </button>
+                    </div>
                 </form>
             </div>
             </div>
+
+            {/* Success/Error Modal */}
+            <Popup
+                open={showSuccessModal}
+                onClose={() => {
+                    setShowSuccessModal(false);
+                    if (!modalMessage.includes('Error')) window.location.href = '/';
+                }}
+                modal
+                nested
+                contentStyle={{ 
+                    borderRadius: 'var(--radius-lg)', 
+                    padding: 'var(--space-8)', 
+                    border: '1px solid var(--border-color)', 
+                    boxShadow: 'var(--shadow-premium)',
+                    width: '400px',
+                    textAlign: 'center',
+                    backgroundColor: 'var(--card-bg)'
+                }}
+            >
+                <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 'var(--space-4)' }}>
+                    <div style={{ 
+                        backgroundColor: modalMessage.includes('Error') ? 'rgba(180, 35, 24, 0.1)' : 'var(--kt-green-soft)', 
+                        borderRadius: 'var(--radius-full)', 
+                        width: '64px', 
+                        height: '64px', 
+                        display: 'flex', 
+                        alignItems: 'center', 
+                        justifyContent: 'center'
+                    }}>
+                        {modalMessage.includes('Error') ? (
+                            <span style={{ fontSize: '32px', color: 'var(--kt-danger)' }}>⚠</span>
+                        ) : (
+                            <AiOutlineCheckCircle size={40} color="var(--kt-green-primary)" />
+                        )}
+                    </div>
+                    
+                    <h2 style={{ margin: 0, color: 'var(--text-color)', fontSize: '1.5rem' }}>
+                        {modalMessage.includes('Error') ? 'Oops!' : 'Success!'}
+                    </h2>
+                    <p style={{ margin: 0, color: 'var(--text-secondary)', lineHeight: '1.6' }}>
+                        {modalMessage}
+                    </p>
+                    
+                    <button 
+                        className="kt-button kt-button-primary"
+                        style={{ marginTop: 'var(--space-4)', width: '100%' }}
+                        onClick={() => {
+                            setShowSuccessModal(false);
+                            if (!modalMessage.includes('Error')) window.location.href = '/';
+                        }}
+                    >
+                        {modalMessage.includes('Error') ? 'Try Again' : 'Done'}
+                    </button>
+                </div>
+            </Popup>
         </div>
     )
 }
diff --git a/client/src/pages/Tree/ShareTree/styles.js b/client/src/pages/Tree/ShareTree/styles.js
index 9c399ec..bcd0e53 100644
--- a/client/src/pages/Tree/ShareTree/styles.js
+++ b/client/src/pages/Tree/ShareTree/styles.js
@@ -1,102 +1,108 @@
-export const DefaultStyle = {
-    display: 'flex',
-    flexDirection: 'row',
-    padding: '10px',
-    fontFamily: 'Alata',
-    alignItems: 'center',
-    width: '100%',
-  }
-
-  export const ContainerStyle = {
-    display: 'flex',
-    flexDirection: 'column',
-    alignItems: 'center',
-    justifyContent: 'flex-start',
-    width: '60%',
-    maxWidth: '600px',
-    height: 'auto',
-    borderRadius: '30px',
-    backgroundColor: '#faf9f6',
-    padding: '20px',
-    boxShadow: '0px 0px 10px rgba(0, 0, 0, 0.1)',
-    marginTop: '5vh'
-}
-  export const FormStyle = {
-    fontFamily: 'Aboreto',
-    width: '100%',
-    display: 'flex',
-    alignItems: 'center',
-    flexDirection: 'column',
-  }
-
-  export const ListStyle = {
-    listStyleType: 'none',
-    fontFamily: 'Alata',
-    display: 'flex',
-    flexDirection: 'column',
-    alignItems: 'center',
-    width: '80%',
-    padding: '0'
-  };
-
-  export const ItemStyle = {
-    margin: '10px 0px',
-    width: '100%',
-    display: 'flex',
-    flexDirection: 'column',
-};
-
-export const FieldStyle = {
-    borderRadius: '5px',
-    border: '1px solid #000000',
-    width: '100%',
-    height: '25px',
-};
-
-export const TextAreaStyle = {
-    borderRadius: '5px',
-    border: '1px solid #000000',
-    height: '70px',
-    width: '100%',
-    resize: 'none'
-};
-
-export const ButtonStyle = {
-    fontFamily: 'Alata',
-    backgroundColor: '#3a5a40',
-    color: 'white',
-    borderRadius: '20px',
-    border: 'none',
-    padding: '10px 30px',
-    margin: '10px',
-    cursor: 'pointer',
-}
-
-export const ListingStyle = {
-    padding: '10px', 
-    border: '1px solid gray', 
-    width: '90%',
-    display: 'flex'
-}
-
-export const AddOptionsStyle = {
-    display: 'flex',
-    flexDirection: 'column',
-    alignItems: 'center',
-    width: '90%',
-    padding: '10px',
-    fontFamily: 'Alata',
-    // border: '1px solid gray',
-    // borderRadius: '5px',
-    marginTop: '10px',
-    height: '200px',
-    overflow: 'auto'
-}
-
-export const RightSide = {
-    display: 'flex',
-    flexDirection: 'column',
-    alignItems: 'center',
-    justifyContent: 'center',
-    width: '100%',
-};
\ No newline at end of file
+export const DefaultStyle = {
+    display: 'flex',
+    flexDirection: 'row',
+    minHeight: '100vh',
+    fontFamily: 'inherit',
+    backgroundColor: 'var(--bg-color)',
+    width: '100%',
+}
+
+export const ContainerStyle = {
+    display: 'flex',
+    flexDirection: 'column',
+    alignItems: 'center',
+    justifyContent: 'flex-start',
+    width: '90%',
+    maxWidth: '650px',
+    height: 'auto',
+    borderRadius: 'var(--radius-lg)',
+    backgroundColor: 'var(--card-bg)',
+    padding: 'var(--space-8)',
+    boxShadow: 'var(--shadow-lg)',
+    marginTop: 'var(--space-10)',
+    border: '1px solid var(--border-color)',
+}
+
+export const FormStyle = {
+    width: '100%',
+    display: 'flex',
+    alignItems: 'center',
+    flexDirection: 'column',
+    marginTop: 'var(--space-4)',
+}
+
+export const ListStyle = {
+    listStyleType: 'none',
+    display: 'flex',
+    flexDirection: 'column',
+    alignItems: 'center',
+    width: '100%',
+    padding: '0',
+    gap: 'var(--space-4)',
+};
+
+export const ItemStyle = {
+    width: '100%',
+    display: 'flex',
+    flexDirection: 'column',
+    gap: 'var(--space-2)',
+};
+
+export const LabelStyle = {
+    fontWeight: '600',
+    color: 'var(--text-color)',
+    fontSize: '0.9rem',
+    marginLeft: 'var(--space-1)',
+};
+
+export const InputStyle = {
+    width: '100%',
+    padding: 'var(--space-3) var(--space-4)',
+    borderRadius: 'var(--radius-md)',
+    border: '1px solid var(--input-border)',
+    backgroundColor: 'var(--input-bg)',
+    fontFamily: 'inherit',
+    fontSize: '1rem',
+    color: 'var(--text-color)',
+    transition: 'all var(--timing-standard)',
+    boxSizing: 'border-box',
+};
+
+export const TextAreaStyle = {
+    ...InputStyle,
+    height: '100px',
+    resize: 'none',
+    lineHeight: '1.5',
+};
+
+export const ListingStyle = {
+    padding: 'var(--space-3) var(--space-4)',
+    borderRadius: 'var(--radius-md)',
+    border: '1px solid var(--border-color)',
+    width: '100%',
+    display: 'flex',
+    alignItems: 'center',
+    gap: 'var(--space-3)',
+    backgroundColor: 'var(--surface-alt)',
+    transition: 'all var(--timing-standard)',
+    boxSizing: 'border-box',
+}
+
+export const AddOptionsStyle = {
+    display: 'flex',
+    flexDirection: 'column',
+    gap: 'var(--space-2)',
+    width: '100%',
+    marginTop: 'var(--space-2)',
+    maxHeight: '250px',
+    overflowY: 'auto',
+    paddingRight: 'var(--space-2)',
+}
+
+export const RightSide = {
+    display: 'flex',
+    flexDirection: 'column',
+    alignItems: 'center',
+    width: '100%',
+    paddingBottom: 'var(--space-10)',
+};
\ No newline at end of file
diff --git a/client/src/pages/Tree/Tree.js b/client/src/pages/Tree/Tree.js
index 58494f9..5bd3fec 100644
--- a/client/src/pages/Tree/Tree.js
+++ b/client/src/pages/Tree/Tree.js
@@ -350,41 +350,41 @@ function FamilyTree({ refreshKey }) {
             {/* Reset Button Overlay */}
             <div style={{
                 position: 'absolute',
-                bottom: '30px',
-                left: '50%',
-                transform: 'translateX(-50%)',
+                bottom: '20px',
+                right: '20px',
                 zIndex: 100
             }}>
-                {/* Reset Button */}
                 <button 
                     onClick={handleResetTree}
                     title="Clear everything and start fresh"
+                    className="kt-card-interactive"
                     style={{
-                        backgroundColor: '#fff',
-                        border: '2px solid #e74c3c',
-                        color: '#e74c3c',
-                        borderRadius: '25px',
-                        padding: '10px 25px',
-                        fontFamily: 'Alata',
-                        fontSize: '14px',
-                        fontWeight: 'bold',
+                        backgroundColor: 'rgba(255, 255, 255, 0.8)',
+                        backdropFilter: 'blur(4px)',
+                        border: '1px solid var(--border-color)',
+                        color: 'var(--text-muted)',
+                        borderRadius: 'var(--radius-md)',
+                        padding: '8px 16px',
+                        fontFamily: 'inherit',
+                        fontSize: '12px',
+                        fontWeight: '600',
                         cursor: 'pointer',
                         display: 'flex',
                         alignItems: 'center',
-                        gap: '8px',
-                        boxShadow: '0 4px 15px rgba(0,0,0,0.2)',
-                        transition: 'all 0.2s ease'
+                        gap: '6px',
+                        transition: 'all 0.2s ease',
+                        boxShadow: 'var(--shadow-sm)'
                     }}
                     onMouseOver={(e) => {
-                        e.currentTarget.style.backgroundColor = '#fff5f5';
-                        e.currentTarget.style.transform = 'scale(1.05)';
+                        e.currentTarget.style.color = 'var(--kt-danger)';
+                        e.currentTarget.style.borderColor = 'var(--kt-danger)';
                     }}
                     onMouseOut={(e) => {
-                        e.currentTarget.style.backgroundColor = '#fff';
-                        e.currentTarget.style.transform = 'scale(1)';
+                        e.currentTarget.style.color = 'var(--text-muted)';
+                        e.currentTarget.style.borderColor = 'var(--border-color)';
                     }}
                 >
-                    <span style={{ fontSize: '18px', lineHeight: '1' }}>↺</span>
+                    <span style={{ fontSize: '14px' }}>↺</span>
                     Reset Tree
                 </button>
             </div>
@@ -554,16 +554,11 @@ function Tree() {
                     {/* header content */}
                     <div style={styles.HeaderStyle}>
                         {/* titles */}
-                        <div>
-                            <h1 style={{ marginBottom: "0px" }}>Your Tree</h1>
-                            <hr style={{
-                                color: '#000000',
-                                backgroundColor: '#000000',
-                                height: .1,
-                                width: '200px',
-                                borderColor: '#000000'
-                            }} />
-                            <h2 style={{ fontFamily: "Aboreto", marginTop: "0px" }}>The {supabaseUser?.user_metadata?.last_name} Family</h2>
+                        <div style={{ display: 'flex', flexDirection: 'column', gap: 'var(--space-1)' }}>
+                            <h1 style={{ margin: 0, color: 'var(--text-color)', fontSize: '2rem' }}>Your Tree</h1>
+                            <h2 style={{ fontFamily: "Aboreto", margin: 0, color: 'var(--text-secondary)', fontSize: '0.9rem', letterSpacing: '1px' }}>
+                                THE {supabaseUser?.user_metadata?.last_name || 'Family'} TREE
+                            </h2>
                         </div>
                         {/* add family member button */}
                         <div style={{ display: 'flex', alignItems: 'center' }}>
@@ -574,9 +569,7 @@ function Tree() {
                         </div>
                     </div>
 
-
                     {/* family tree container */}
-                    {/* using a border for now to differentiate tree's viewable/draggable area, and to contain automatic scaling of the tree */}
                     <div style={styles.FamilyTreeContainerStyle}> <FamilyTree refreshKey={refreshKey} /> </div>
                 </div>
             ) : (
diff --git a/client/src/pages/Tree/ViewSharedTrees/ViewSharedTrees.js b/client/src/pages/Tree/ViewSharedTrees/ViewSharedTrees.js
index 29cf78a..b774ae7 100644
--- a/client/src/pages/Tree/ViewSharedTrees/ViewSharedTrees.js
+++ b/client/src/pages/Tree/ViewSharedTrees/ViewSharedTrees.js
@@ -3,12 +3,17 @@ import * as styles from './styles';
 import { Link } from 'react-router-dom';
 import { useCurrentUser } from '../../../CurrentUserProvider';
 import { SERVER_URL } from '../../../config/urls';
+import { AiOutlineDelete, AiOutlineCheckCircle } from 'react-icons/ai';
+import Popup from 'reactjs-popup';
+import 'reactjs-popup/dist/index.css';
 
 // const defaultAvatar = require('../../../assets/default-avatar.png');
 
 function ViewSharedTrees() {
     const [trees, setTrees] = useState([]);
     const [userData, setUserData] = useState([]);
+    const [showModal, setShowModal] = useState(false);
+    const [modalMessage, setModalMessage] = useState("");
     const { currentAccountID } = useCurrentUser();
 
     const getTimeAgo = (dateString) => {
@@ -35,15 +40,17 @@ function ViewSharedTrees() {
 
             if (response.ok) {
                 setTrees(prevTrees => prevTrees.filter(tree => tree.sharedtreeid !== sharedTreeId));
-                console.log('Shared tree deleted successfully');
+                setModalMessage('Shared tree deleted successfully');
+                setShowModal(true);
             } else {
                 const errorData = await response.json();
-                console.error('Error deleting shared tree:', errorData);
-                alert('Failed to delete shared tree');
+                setModalMessage('Failed to delete shared tree: ' + (errorData.error || 'Unknown error'));
+                setShowModal(true);
             }
         } catch (error) {
             console.error('Error deleting shared tree:', error);
-            alert('Failed to delete shared tree');
+            setModalMessage('Failed to delete shared tree');
+            setShowModal(true);
         }
     };
 
@@ -58,21 +65,26 @@ function ViewSharedTrees() {
             if (response.ok) {
                 if (status === 'rejected') {
                     setTrees(prevTrees => prevTrees.filter(tree => tree.sharedtreeid !== sharedTreeId));
+                    setModalMessage('Invitation rejected');
+                    setShowModal(true);
                 } else {
                     setTrees(prevTrees =>
                         prevTrees.map(tree =>
                             tree.sharedtreeid === sharedTreeId ? { ...tree, status } : tree
                         )
                     );
+                    setModalMessage('Invitation accepted!');
+                    setShowModal(true);
                 }
             } else {
                 const errorData = await response.json();
-                console.error(`Error updating tree status:`, errorData);
-                alert(`Failed to ${status} invitation`);
+                setModalMessage(`Failed to ${status} invitation: ` + (errorData.error || 'Unknown error'));
+                setShowModal(true);
             }
         } catch (error) {
             console.error('Error updating tree status:', error);
-            alert(`Failed to ${status} invitation`);
+            setModalMessage(`Failed to ${status} invitation`);
+            setShowModal(true);
         }
     };
 
@@ -114,107 +126,159 @@ function ViewSharedTrees() {
         <div style={styles.DefaultStyle}>
             <div style={{width: '150px'}}></div>
             <div style={styles.RightSide}>
-            <div style={styles.ContainerStyle}>
+            <div className="animate-in" style={styles.ContainerStyle}>
                 {/* title */}
-                <h1 style={{ margin: '0px' }}>Shared Trees</h1>
-                <hr style={{ width: '50%', border: '1px solid #000', margin: '1px 0' }} />
+                <h1 style={{ margin: '0px', color: 'var(--text-color)' }}>Shared Trees</h1>
+                <hr style={{ width: '50px', border: 'none', height: '2px', backgroundColor: 'var(--kt-green-primary)', margin: 'var(--space-2) 0 var(--space-6) 0' }} />
 
                 {/* dynamic list of results */}
                 <ul style={styles.ListStyle}>
-                    {trees?.map(tree => (
-                        <li key={tree.sharedtreeid} style={styles.ItemStyle}>
-                            <div style={{ display: 'flex', justifyContent: 'space-between', width: '100%', alignItems: 'flex-start' }}>
-                                <div style={{ display: 'flex', flexDirection: 'column', flex: 1 }}>
-                                    {/* name, status badge, and timestamp */}
-                                    <div style={{ display: 'flex', alignItems: 'center', marginBottom: '5px' }}>
-                                        <span style={{ fontWeight: 'bold', marginRight: '10px' }}>
-                                            {userData.find(user => user.id === tree.senderid)?.firstname}{' '}
-                                            {userData.find(user => user.id === tree.senderid)?.lastname}
-                                        </span>
-                                        {tree.status === 'pending' && (
-                                            <span style={{ fontSize: '0.75em', backgroundColor: '#fff3cd', color: '#856404', border: '1px solid #ffc107', borderRadius: '4px', padding: '1px 6px', marginRight: '10px' }}>
-                                                Pending
+                    {trees && trees.length > 0 ? (
+                        trees.map(tree => (
+                            <li key={tree.sharedtreeid} style={styles.ItemStyle} className="kt-card-interactive">
+                                <div style={{ display: 'flex', justifyContent: 'space-between', width: '100%', alignItems: 'center' }}>
+                                    <div style={{ display: 'flex', flexDirection: 'column', flex: 1 }}>
+                                        <div style={{ display: 'flex', alignItems: 'center', marginBottom: '4px' }}>
+                                            <span style={{ fontWeight: '600', color: 'var(--text-color)', marginRight: '10px' }}>
+                                                {userData.find(user => user.id === tree.senderid)?.firstname}{' '}
+                                                {userData.find(user => user.id === tree.senderid)?.lastname}'s Tree
                                             </span>
+                                            {tree.status === 'pending' && (
+                                                <span style={{ 
+                                                    fontSize: '0.7em', 
+                                                    backgroundColor: 'var(--kt-warning-bg)', 
+                                                    color: 'var(--kt-warning-text)', 
+                                                    padding: '2px 8px', 
+                                                    borderRadius: '12px',
+                                                    fontWeight: '500'
+                                                }}>
+                                                    Pending
+                                                </span>
+                                            )}
+                                        </div>
+                                        <div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
+                                            <span style={{ fontSize: '0.85em', color: 'var(--text-muted)' }}>
+                                                Shared {getTimeAgo(tree.sharedate)}
+                                            </span>
+                                        </div>
+                                        {tree?.comment && (
+                                            <div style={{ color: 'var(--text-color)', fontSize: '0.9em', marginTop: '4px', fontStyle: 'italic', opacity: 0.8 }}>
+                                                "{tree?.comment}"
+                                            </div>
+                                        )}
+                                    </div>
+
+                                    <div style={{ display: 'flex', gap: '8px', alignItems: 'center' }}>
+                                        {tree.status === 'pending' ? (
+                                            <>
+                                                <button
+                                                    onClick={() => handleUpdateStatus(tree.sharedtreeid, 'accepted')}
+                                                    className="kt-button kt-button-ghost-success"
+                                                    style={{ padding: '6px 16px', fontSize: '13px' }}
+                                                >
+                                                    Accept
+                                                </button>
+                                                <button
+                                                    onClick={() => handleUpdateStatus(tree.sharedtreeid, 'rejected')}
+                                                    className="kt-button kt-button-ghost-danger"
+                                                    style={{ padding: '6px 16px', fontSize: '13px' }}
+                                                >
+                                                    Reject
+                                                </button>
+                                            </>
+                                        ) : (
+                                            <>
+                                                <Link 
+                                                    to={`/sharedtree/${tree.sharedtreeid}`} 
+                                                    className="kt-button kt-button-primary"
+                                                    style={{ padding: '6px 16px', textDecoration: 'none', fontSize: '13px' }}
+                                                >
+                                                    View Tree
+                                                </Link>
+                                                <button 
+                                                    onClick={() => handleDeleteTree(tree.sharedtreeid)}
+                                                    className="kt-button kt-button-danger"
+                                                    style={{ padding: '8px', borderRadius: 'var(--radius-md)' }}
+                                                    title="Delete Shared Tree"
+                                                >
+                                                    <AiOutlineDelete size={18} />
+                                                </button>
+                                            </>
                                         )}
-                                        <span style={{ fontSize: '0.9em', color: '#666' }}>
-                                            {getTimeAgo(tree.sharedate)}
-                                        </span>
                                     </div>
-                                    
-                                    {/* comment */}
-                                    {tree?.comment && (
-                                        <div style={{ color: '#333', lineHeight: '1.5' }}>
-                                            "{tree?.comment}"
-                                        </div>
-                                    )}
-                                </div>
-                                <div style={{ display: 'flex', gap: '10px', marginLeft: '15px', whiteSpace: 'nowrap', alignItems: 'center' }}>
-                                    {tree.status === 'pending' ? (
-                                        <>
-                                            {/* accept invite */}
-                                            <button
-                                                onClick={() => handleUpdateStatus(tree.sharedtreeid, 'accepted')}
-                                                style={{
-                                                    background: 'none',
-                                                    border: 'none',
-                                                    color: '#2e7d32',
-                                                    cursor: 'pointer',
-                                                    textDecoration: 'underline',
-                                                    padding: 0,
-                                                    fontFamily: 'inherit',
-                                                    fontSize: 'inherit'
-                                                }}
-                                            >
-                                                Accept
-                                            </button>
-                                            {/* reject invite */}
-                                            <button
-                                                onClick={() => handleUpdateStatus(tree.sharedtreeid, 'rejected')}
-                                                style={{
-                                                    background: 'none',
-                                                    border: 'none',
-                                                    color: '#d32f2f',
-                                                    cursor: 'pointer',
-                                                    textDecoration: 'underline',
-                                                    padding: 0,
-                                                    fontFamily: 'inherit',
-                                                    fontSize: 'inherit'
-                                                }}
-                                            >
-                                                Reject
-                                            </button>
-                                        </>
-                                    ) : (
-                                        <>
-                                            {/* view tree */}
-                                            <Link to={`/sharedtree/${tree.sharedtreeid}`} style={{ color: '#000' }}>
-                                                View Tree
-                                            </Link>
-                                            {/* delete tree */}
-                                            <button 
-                                                onClick={() => handleDeleteTree(tree.sharedtreeid)}
-                                                style={{ 
-                                                    background: 'none', 
-                                                    border: 'none', 
-                                                    color: '#d32f2f', 
-                                                    cursor: 'pointer',
-                                                    textDecoration: 'underline',
-                                                    padding: 0,
-                                                    fontFamily: 'inherit',
-                                                    fontSize: 'inherit'
-                                                }}
-                                            >
-                                                Delete
-                                            </button>
-                                        </>
-                                    )}
                                 </div>
-                            </div>
-                        </li>
-                    ))}
+                            </li>
+                        ))
+                    ) : (
+                        <div style={{ 
+                            textAlign: 'center', 
+                            padding: 'var(--space-8) var(--space-4)',
+                            color: 'var(--text-muted)',
+                            display: 'flex',
+                            flexDirection: 'column',
+                            alignItems: 'center',
+                            gap: 'var(--space-4)'
+                        }}>
+                             <div style={{ fontSize: '40px', opacity: 0.5 }}>🌳</div>
+                             <p style={{ margin: 0, fontSize: '1.1rem', fontWeight: '500' }}>No shared trees yet.</p>
+                             <p style={{ margin: 0, fontSize: '0.9rem', maxWidth: '300px', lineHeight: '1.5' }}>
+                                Invite family members and start building your story together!
+                             </p>
+                        </div>
+                    )}
                 </ul>
             </div>
             </div>
+
+            {/* Success/Error Modal */}
+            <Popup
+                open={showModal}
+                onClose={() => setShowModal(false)}
+                modal
+                nested
+                contentStyle={{ 
+                    borderRadius: 'var(--radius-lg)', 
+                    padding: 'var(--space-8)', 
+                    border: '1px solid var(--border-color)', 
+                    boxShadow: 'var(--shadow-premium)',
+                    width: '400px',
+                    textAlign: 'center',
+                    backgroundColor: 'var(--card-bg)'
+                }}
+            >
+                <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 'var(--space-4)' }}>
+                    <div style={{ 
+                        backgroundColor: modalMessage.toLowerCase().includes('failed') || modalMessage.toLowerCase().includes('error') ? 'rgba(180, 35, 24, 0.1)' : 'var(--kt-green-soft)', 
+                        borderRadius: 'var(--radius-full)', 
+                        width: '64px', 
+                        height: '64px', 
+                        display: 'flex', 
+                        alignItems: 'center', 
+                        justifyContent: 'center'
+                    }}>
+                        {modalMessage.toLowerCase().includes('failed') || modalMessage.toLowerCase().includes('error') ? (
+                            <span style={{ fontSize: '32px', color: 'var(--kt-danger)' }}>⚠</span>
+                        ) : (
+                            <AiOutlineCheckCircle size={40} color="var(--kt-green-primary)" />
+                        )}
+                    </div>
+                    
+                    <h2 style={{ margin: 0, color: 'var(--text-color)', fontSize: '1.5rem' }}>
+                        {modalMessage.toLowerCase().includes('failed') || modalMessage.toLowerCase().includes('error') ? 'Oops!' : 'Done!'}
+                    </h2>
+                    <p style={{ margin: 0, color: 'var(--text-secondary)', lineHeight: '1.6' }}>
+                        {modalMessage}
+                    </p>
+                    
+                    <button 
+                        className="kt-button kt-button-primary"
+                        style={{ marginTop: 'var(--space-4)', width: '100%' }}
+                        onClick={() => setShowModal(false)}
+                    >
+                        Close
+                    </button>
+                </div>
+            </Popup>
         </div>
     )
 }
diff --git a/client/src/pages/Tree/ViewSharedTrees/styles.js b/client/src/pages/Tree/ViewSharedTrees/styles.js
index 0268c3c..3093cd6 100644
--- a/client/src/pages/Tree/ViewSharedTrees/styles.js
+++ b/client/src/pages/Tree/ViewSharedTrees/styles.js
@@ -12,24 +12,28 @@ export const DefaultStyle = {
     flexDirection: 'column',
     alignItems: 'center',
     justifyContent: 'flex-start',
-    width: '60%',
+    width: '90%',
     maxWidth: '600px',
-    height: 'auto',
-    borderRadius: '30px',
-    backgroundColor: '#faf9f6',
-    padding: '20px',
-    boxShadow: '0px 0px 10px rgba(0, 0, 0, 0.1)',
-    marginTop: '5vh'
+    borderRadius: 'var(--radius-xl)',
+    backgroundColor: 'var(--card-bg)',
+    padding: 'var(--space-10) var(--space-8)',
+    boxShadow: 'var(--shadow-premium)',
+    border: '1px solid var(--border-color)',
+    marginTop: '5vh',
+    animation: 'animate-in var(--timing-smooth) forwards'
 }
 
 export const ItemStyle = {
-    margin: '10px 0px',
+    margin: 'var(--space-2) 0',
     width: '100%',
     display: 'flex',
-    flexDirection: 'column',
-    border: '1px solid rgb(87, 87, 87)',
-    padding: '10px 20px',
+    flexDirection: 'row',
+    backgroundColor: 'var(--surface-alt)',
+    border: '1px solid var(--border-color)',
+    borderRadius: 'var(--radius-md)',
+    padding: 'var(--space-4) var(--space-6)',
     alignItems: 'center',
+    transition: 'all var(--timing-standard)',
 };
 
 export const ListStyle = {
diff --git a/client/src/pages/Tree/styles.js b/client/src/pages/Tree/styles.js
index 1d0e8ab..4352ac3 100644
--- a/client/src/pages/Tree/styles.js
+++ b/client/src/pages/Tree/styles.js
@@ -2,7 +2,23 @@ export const DefaultStyle = {
     display: 'flex',
     flexDirection: 'row',
     textAlign: 'center',
-    fontFamily: 'Alata'
+    fontFamily: 'inherit',
+    backgroundColor: 'var(--bg-color)',
+    minHeight: '100vh'
+}
+
+export const ButtonStyle = {
+    fontFamily: 'inherit',
+    backgroundColor: 'var(--kt-green-primary)',
+    color: 'white',
+    borderRadius: 'var(--radius-full)',
+    border: 'none',
+    padding: '12px 30px',
+    margin: 'var(--space-2)',
+    cursor: 'pointer',
+    fontWeight: '600',
+    transition: 'all 0.2s',
+    boxShadow: 'var(--shadow-sm)',
 }
 
 export const ArrowContainerStyle = {
@@ -15,52 +31,36 @@ export const ArrowContainerStyle = {
 }
 
 export const MainContainerStyle = {
-    width: '100%', 
-    height: '100%', 
-    // position: 'absolute', // needed for arrows to work, temporarily removed to make header work properly to left of tree
-    top: '0', 
-    left: '0', 
-    zIndex: '1', 
-    overflow: 'hidden', 
-    alignItems: 'center', 
-    justifyContent: 'flex-start', 
-    display: 'flex', 
-    margin: '3% 14%',
-}
-
-export const TopRightArrowStyle = {
-    width: '370px', 
-    height: '370px', 
-    margin: '20px 20px', 
-    flex: '50%', 
-    textAlign: 'right', 
-    paddingLeft: '70%'
-}
-
-export const BottomLeftArrowStyle = {
-    width: '370px', 
-    height: '370px', 
-    margin: '20px 20px', 
-    flex: '50%', 
-    paddingRight: '70%'
+    flex: 1,
+    height: '100vh',
+    display: 'flex',
+    flexDirection: 'column',
+    padding: 'var(--space-8)',
+    backgroundColor: 'var(--bg-color)',
+    marginLeft: '220px', // width of navbar
+    boxSizing: 'border-box',
 }
 
 export const HeaderStyle = {
     display: 'flex',
-    width: '20%', 
-    marginLeft: '9%',
-    marginRight: '10%',
-    marginBottom: '5%',
-    flexDirection: 'column',
+    justifyContent: 'space-between',
     alignItems: 'center',
-    zIndex: '-1'
+    marginBottom: 'var(--space-6)',
+    width: '100%',
+    maxWidth: '1200px',
+    margin: '0 auto var(--space-6) auto',
 }
 
 export const FamilyTreeContainerStyle = { 
-    width: '80%', 
-    height: '90vh', 
-    margin: 'auto',
-    borderStyle: 'double', 
-    // maxWidth: '800px', 
-    borderRadius: '30px' 
+    flex: 1,
+    width: '100%',
+    maxWidth: '1200px',
+    margin: '0 auto',
+    border: '1px solid var(--border-color)', 
+    borderRadius: 'var(--radius-xl)',
+    backgroundColor: 'var(--card-bg)',
+    boxShadow: 'var(--shadow-premium)',
+    overflow: 'hidden',
+    position: 'relative',
+    animation: 'animate-in var(--timing-smooth) forwards'
 }
\ No newline at end of file
diff --git a/client/src/pages/Tree/tree.css b/client/src/pages/Tree/tree.css
index c7e70a7..37a9193 100644
--- a/client/src/pages/Tree/tree.css
+++ b/client/src/pages/Tree/tree.css
@@ -7,25 +7,24 @@
     --background-color: none;
     position: relative;
     display: flex;
-    font-family: 'Alata';
+    font-family: inherit;
   }
   .f3 * {
     box-sizing: border-box;
   }
   .f3.f3-cont {
-    width:100%;
-    height:90vh;
-    max-height:90vh;
-    color:#fff
+    width: 100%;
+    height: 100%;
+    color: var(--text-color);
   }
   .f3 {
     --female-color: rgb(196, 138, 146);
     --male-color: rgb(120, 159, 172);
-    --genderless-color: lightgray;
-    --background-color: rgb(33, 33, 33);
-    --text-color: #0e0e0e;
+    --genderless-color: #cbd5e1;
+    --background-color: var(--card-bg);
+    --text-color: var(--text-color);
 
-    font-family: 'Alata', sans-serif;
+    font-family: inherit;
   }
 
   .f3 .cursor-pointer {
@@ -36,7 +35,7 @@
     height: 100%;
   }
   .f3 svg.main_svg text {
-    fill: var(--background-color);
+    fill: var(--text-color);
   }
   
   /* card-html */
@@ -53,7 +52,7 @@
   }
   .f3 div.card .mini-tree line {
     stroke-width: 2px;
-    stroke: var(--background-color);
+    stroke: var(--text-color);
     stroke-linecap: round;
   }
 
@@ -65,7 +64,7 @@
   }
   .f3 div.card-image-circle {
     border-radius: 50%;
-    padding: 5px;
+    padding: var(--space-1);
     width: 90px;
     height: 90px;
   }
@@ -79,11 +78,13 @@
     min-height: 22px;
     text-align: center;
     background-color: var(--genderless-color);
+    color: #333;
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
-    border-radius: 3px;
-    padding: 0 5px;
+    border-radius: var(--radius-sm);
+    padding: 0 var(--space-1);
+    font-weight: 600;
   }
 
   .f3 div.card-image-circle img {
@@ -96,24 +97,25 @@
   .f3 div.card-image-circle svg {
     width: 100%;
     height: 100%;
-    padding: 5px;
+    padding: var(--space-1);
     border-radius: 50%;
     object-fit: cover;
   }
 
   .f3 div.card:hover > div {
-  transform: translate(0, -2px);
+    transform: translate(0, -4px);
+    transition: transform 0.2s ease;
   }
   .f3 div.card-main .card-inner, .f3 div.card:hover .card-inner {
-    box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.8);
+    box-shadow: var(--shadow-lg);
   }
 
   .f3 div.card-main .card-inner {
-    outline: 4px solid rgba(220, 220, 220, 1);
+    outline: 4px solid var(--kt-green-primary);
   }
 
   .f3 div.card-inner.f3-path-to-main {
-    outline: 4px solid rgba(255, 255, 255, 1);
+    outline: 4px solid var(--kt-green-accent);
   }
   .f3 div.card-female .card-inner, .f3 div.card-female .person-icon svg {
   background-color: var(--female-color);
@@ -126,14 +128,50 @@
   }
 
   /* branches between nodes */
+  @keyframes draw-vine {
+    from {
+      stroke-dashoffset: 1000;
+    }
+    to {
+      stroke-dashoffset: 0;
+    }
+  }
+
   .f3 .link {
-    transition: stroke-width 0.2s ease-in-out;
-    stroke: #76380C;
-    stroke-width: 4;
+    transition: all var(--timing-standard);
+    stroke: var(--kt-green-accent);
+    stroke-width: 3;
+    stroke-dasharray: 1000;
+    stroke-dashoffset: 1000;
+    animation: draw-vine 1.5s var(--timing-smooth) forwards;
+    stroke-linecap: round;
+    opacity: 0.6;
   }
   
   .f3 .link.f3-path-to-main {
-    stroke-width: 4px;
+    stroke-width: 5px;
+    stroke: var(--kt-green-primary);
+    opacity: 1;
+    stroke-dasharray: none; /* No animation for main path after initial growth */
+    animation: none;
+    stroke-dashoffset: 0;
+  }
+
+  /* Node Hover Effects */
+  .f3 div.card-inner {
+    transition: all var(--timing-standard);
+    border: 2px solid transparent;
+  }
+
+  .f3 div.card:hover div.card-inner {
+    transform: translateY(-5px) scale(1.05);
+    box-shadow: var(--shadow-lg);
+    border-color: var(--kt-green-primary);
+  }
+
+  .f3 div.card-main .card-inner {
+    border: 3px solid var(--kt-green-primary);
+    box-shadow: 0 0 15px var(--kt-green-subtle);
   }
 
 
@@ -159,9 +197,9 @@
   position: absolute;
   top: 5px;
   right: 5px;
-  width: 20px;
-  height: 20px;
-  background-color: #ff4d4d;
+  width: 24px;
+  height: 24px;
+  background-color: var(--kt-danger);
   color: white;
   border-radius: 50%;
   display: none; /* Hidden by default */
@@ -171,7 +209,7 @@
   font-weight: bold;
   cursor: pointer;
   border: 2px solid white;
-  box-shadow: 0 2px 4px rgba(0,0,0,0.3);
+  box-shadow: var(--shadow-md);
   z-index: 10;
   transition: transform 0.2s, background-color 0.2s;
 }
@@ -198,7 +236,7 @@
 }
 
 .tree-plus-button:hover path {
-  fill: #000;
+  fill: var(--text-color);
   transition: fill 0.3s ease;
 }
 
diff --git a/client/src/pages/ViewSharedTree/ViewSharedTree.js b/client/src/pages/ViewSharedTree/ViewSharedTree.js
index b42eb23..7969e46 100644
--- a/client/src/pages/ViewSharedTree/ViewSharedTree.js
+++ b/client/src/pages/ViewSharedTree/ViewSharedTree.js
@@ -97,20 +97,16 @@ function ViewSharedTree() {
     return (
         <div style={styles.DefaultStyle}>
             <NavBar />
-            <div style={styles.MainContainerStyle} className="main-container">
+            <div style={styles.MainContainerStyle} className="main-container animate-in">
                 {/* header content */}
                 <div style={styles.HeaderStyle}>
                     {/* titles */}
-                    <div>
-                        <h1 style={{marginBottom: "0px"}}>{username.split(" ")[0]}'s Tree</h1>
-                        <hr  style={{
-                            color: '#000000',
-                            backgroundColor: '#000000',
-                            height: .1,
-                            width: '200px',
-                            borderColor : '#000000'
-                        }}/>
-                        <h2 style={{fontFamily: "Aboreto", marginTop: "0px"}}>The {username.split(" ")[1]} Family</h2> 
+                    <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 'var(--space-1)' }}>
+                        <h1 style={{ margin: 0, color: 'var(--text-color)' }}>{username.split(" ")[0]}'s Tree</h1>
+                        <hr style={{ width: '50px', border: 'none', height: '2px', backgroundColor: 'var(--kt-green-primary)', margin: 'var(--space-1) 0' }} />
+                        <h2 style={{ fontFamily: "Aboreto", margin: 0, color: 'var(--text-secondary)', fontSize: '0.9rem', letterSpacing: '1px' }}>
+                            The {username.split(" ")[1]} Family
+                        </h2> 
                     </div>
                 </div>
                 
diff --git a/client/src/pages/ViewSharedTree/styles.js b/client/src/pages/ViewSharedTree/styles.js
index 6cb8013..e904be6 100644
--- a/client/src/pages/ViewSharedTree/styles.js
+++ b/client/src/pages/ViewSharedTree/styles.js
@@ -2,7 +2,9 @@ export const DefaultStyle = {
   display: 'flex',
   flexDirection: 'row',
   textAlign: 'center',
-  fontFamily: 'Alata'
+  fontFamily: 'inherit',
+  backgroundColor: 'var(--bg-color)',
+  minHeight: '100vh'
 }
 
 export const ArrowContainerStyle = {
@@ -17,7 +19,6 @@ export const ArrowContainerStyle = {
 export const MainContainerStyle = {
   width: '100%', 
   height: '100%', 
-  // position: 'absolute', // needed for arrows to work, temporarily removed to make header work properly to left of tree
   top: '0', 
   left: '0', 
   zIndex: '1', 
@@ -25,13 +26,13 @@ export const MainContainerStyle = {
   alignItems: 'center', 
   justifyContent: 'flex-start', 
   display: 'flex', 
-  margin: '3% 14%',
+  margin: 'var(--space-6) 14%',
 }
 
 export const TopRightArrowStyle = {
   width: '370px', 
   height: '370px', 
-  margin: '20px 20px', 
+  margin: 'var(--space-5) var(--space-5)', 
   flex: '50%', 
   textAlign: 'right', 
   paddingLeft: '70%'
@@ -40,26 +41,27 @@ export const TopRightArrowStyle = {
 export const BottomLeftArrowStyle = {
   width: '370px', 
   height: '370px', 
-  margin: '20px 20px', 
+  margin: 'var(--space-5) var(--space-5)', 
   flex: '50%', 
   paddingRight: '70%'
 }
 
 export const HeaderStyle = {
   display: 'flex',
-  width: '20%', 
-  marginLeft: '9%',
-  marginRight: '10%',
-  marginBottom: '5%',
   flexDirection: 'column',
   alignItems: 'center',
-  zIndex: '-1'
+  marginBottom: 'var(--space-8)',
+  zIndex: '1'
 }
 
 export const FamilyTreeContainerStyle = { 
-  width: '80%', 
-  height: '90vh', 
-  borderStyle: 'double', 
-  // maxWidth: '800px', 
-  borderRadius: '30px' 
+  width: '100%', 
+  height: '80vh', 
+  margin: '0 auto',
+  borderRadius: 'var(--radius-xl)',
+  backgroundColor: 'var(--card-bg)',
+  boxShadow: 'var(--shadow-lg)',
+  border: '1px solid var(--border-color)',
+  position: 'relative',
+  overflow: 'hidden'
 }
\ No newline at end of file
diff --git a/client/src/pages/WebsiteSettings/styles.js b/client/src/pages/WebsiteSettings/styles.js
index 9dc0cff..2d9f41b 100644
--- a/client/src/pages/WebsiteSettings/styles.js
+++ b/client/src/pages/WebsiteSettings/styles.js
@@ -1,67 +1,78 @@
 export const DefaultStyle = {
-  fontFamily: 'Alata',
+  fontFamily: 'inherit',
   textAlign: 'left',
+  backgroundColor: 'var(--bg-color)',
+  minHeight: '100vh',
+  color: 'var(--text-color)',
 }
 
 export const RightSide = {
   display: 'flex',
-  padding: '2%'
+  padding: 'var(--space-6)',
+  flexDirection: 'column',
+  width: '100%',
+  alignItems: 'center',
 }
 
 export const SettingsContainer = {
-  width: '60%',
-  margin: 'auto',
-  padding: '20px',
-  background: 'var(--card-bg, #f9f9f9)',
-  borderRadius: '10px',
-  boxShadow: '0px 4px 6px rgba(0, 0, 0, 0.1)',
-  fontFamily: 'Alata',
-  color: 'var(--text-color, #333)',
-  transition: 'background-color 0.3s ease, color 0.3s ease'
+  width: '100%',
+  maxWidth: '800px',
+  margin: '0 auto',
+  padding: 'var(--space-8)',
+  background: 'var(--card-bg)',
+  borderRadius: 'var(--radius-lg)',
+  boxShadow: 'var(--shadow-lg)',
+  fontFamily: 'inherit',
+  color: 'var(--text-color)',
+  transition: 'background-color 0.3s ease, color 0.3s ease',
+  border: '1px solid var(--border-color)',
 };
 
 export const Section = {
-  marginBottom: '20px',
-  padding: '15px',
-  borderBottom: '1px solid var(--border-color, #ddd)',
+  marginBottom: 'var(--space-6)',
+  paddingBottom: 'var(--space-4)',
+  borderBottom: '1px solid var(--border-color)',
 };
 
 export const Title = {
   textAlign: 'left',
-  color: 'var(--text-color, #333)',
-  fontFamily: 'Aboreto',
-  marginLeft: '10px',
+  color: 'var(--text-color)',
+  fontFamily: '"Aboreto", sans-serif',
+  fontSize: '28px',
+  margin: '0 0 var(--space-6) 0',
 };
 
 export const SubTitle = {
-  color: 'var(--text-color, #444)',
-  marginBottom: '10px'
+  color: 'var(--text-secondary)',
+  marginBottom: 'var(--space-2)',
+  fontSize: '18px',
+  fontWeight: '600',
 };
 
 export const Button = {
-  fontFamily: 'Alata',
-  backgroundColor: '#3a5a40',
+  fontFamily: 'inherit',
+  backgroundColor: 'var(--kt-green-primary)',
   color: 'white',
-  borderRadius: '10px',
+  borderRadius: 'var(--radius-md)',
   border: 'none',
   padding: '10px 20px',
-  margin: '10px 10px 10px 0px',
+  margin: 'var(--space-2) var(--space-2) var(--space-2) 0px',
   cursor: 'pointer',
-  width: '20%',
-  minWidth: '145px',
-  height: '45px'
+  fontWeight: '600',
+  transition: 'background-color 0.2s',
 };
 
 export const Input = {
-  width: '70%',
-  padding: '8px',
-  marginTop: '5px',
-  marginLeft: '10px',
-  border: '1px solid var(--input-border, #ccc)',
-  borderRadius: '5px',
-  backgroundColor: 'var(--input-bg, #ffffff)',
-  color: 'var(--text-color, #000)',
-  transition: 'background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease'
+  width: '100%',
+  maxWidth: '400px',
+  padding: '10px 14px',
+  marginTop: 'var(--space-1)',
+  border: '1px solid var(--input-border)',
+  borderRadius: 'var(--radius-sm)',
+  backgroundColor: 'var(--input-bg)',
+  color: 'var(--text-color)',
+  outline: 'none',
+  transition: 'all 0.2s ease'
 };
 
 export const ToggleSwitchContainer = {
@@ -85,40 +96,29 @@ export const ToggleSwitchSlider = {
   left: 0,
   right: 0,
   bottom: 0,
-  backgroundColor: '#ccc',
+  backgroundColor: 'var(--border-color)',
   transition: '0.3s',
   borderRadius: '24px',
-  '&:before': {
-    position: 'absolute',
-    content: '""',
-    height: '18px',
-    width: '18px',
-    left: '3px',
-    bottom: '3px',
-    backgroundColor: 'white',
-    transition: '0.3s',
-    borderRadius: '50%'
-  }
 };
 
 export const SignOutContainer = {
   display: 'flex',
   justifyContent: 'flex-end',
-  padding: '20px',
-  marginTop: '30px',
-  borderTop: '1px solid var(--border-color, #e0e0e0)'
+  padding: 'var(--space-6) 0',
+  marginTop: 'var(--space-8)',
+  borderTop: '1px solid var(--border-color)'
 };
 
 export const SignOutButton = {
-  backgroundColor: '#dc3545',
+  backgroundColor: 'var(--kt-danger)',
   color: 'white',
   border: 'none',
-  borderRadius: '8px',
+  borderRadius: 'var(--radius-md)',
   padding: '12px 24px',
   fontSize: '16px',
   fontWeight: '600',
   cursor: 'pointer',
-  boxShadow: '0 2px 4px rgba(220, 53, 69, 0.2)',
+  boxShadow: 'var(--shadow-md)',
   transition: 'all 0.2s ease',
   minWidth: '120px'
 };
diff --git a/client/src/pages/WebsiteSettings/toggle.css b/client/src/pages/WebsiteSettings/toggle.css
index fb777df..cda03ec 100644
--- a/client/src/pages/WebsiteSettings/toggle.css
+++ b/client/src/pages/WebsiteSettings/toggle.css
@@ -12,6 +12,8 @@
   position: absolute;
 }
 
+
+
 .toggle-switch-slider {
   position: absolute;
   cursor: pointer;
@@ -19,8 +21,8 @@
   left: 0;
   right: 0;
   bottom: 0;
-  background-color: #ccc;
-  transition: 0.3s;
+  background-color: var(--border-color);
+  transition: var(--timing-smooth);
   border-radius: 24px;
 }
 
@@ -32,27 +34,24 @@
   left: 3px;
   bottom: 3px;
   background-color: white;
-  transition: 0.3s;
+  transition: var(--timing-smooth);
   border-radius: 50%;
+  box-shadow: 0 2px 4px rgba(0,0,0,0.2);
 }
 
 .toggle-switch-input:checked + .toggle-switch-slider {
-  background-color: #3a5a40;
+  background-color: var(--kt-green-primary);
 }
 
 .toggle-switch-input:checked + .toggle-switch-slider:before {
   transform: translateX(26px);
 }
 
-.toggle-switch-input:focus + .toggle-switch-slider {
-  box-shadow: 0 0 1px #3a5a40;
-}
-
 .dark-mode .toggle-switch-slider {
-  background-color: #555;
+  background-color: var(--surface-alt);
 }
 
 .dark-mode .toggle-switch-input:checked + .toggle-switch-slider {
-  background-color: #4CAF50;
+  background-color: var(--kt-green-accent);
 }