diff --git a/frontend/src/index.css b/frontend/src/index.css
index 28cde43..4028c63 100644
--- a/frontend/src/index.css
+++ b/frontend/src/index.css
@@ -181,6 +181,16 @@
   color: var(--text-secondary);
 }
 
+.member-current {
+  background-color: rgb(243, 232, 255);
+  border-color: rgb(216, 180, 254);
+}
+
+[data-theme="dark"] .member-current {
+  background-color: rgba(139, 92, 246, 0.2);
+  border-color: rgba(139, 92, 246, 0.5);
+}
+
 .animate-fadeIn {
   animation: fadeIn 0.2s ease-in-out;
 }
diff --git a/frontend/src/pages/Profile.tsx b/frontend/src/pages/Profile.tsx
index 538f508..414d76f 100644
--- a/frontend/src/pages/Profile.tsx
+++ b/frontend/src/pages/Profile.tsx
@@ -238,7 +238,7 @@ export default function Profile() {
                     {familyMembers.map((member) => (
                       <div
                         key={member.id}
-                        className={`flex items-center justify-between p-3 rounded-xl ${member.id === user?.id ? 'bg-purple-50 border border-purple-200' : 'bg-gray-50'}`}
+                        className={`flex items-center justify-between p-3 rounded-xl ${member.id === user?.id ? 'member-current border' : 'bg-gray-50'}`}
                       >
                         <div className="flex items-center gap-2">
                           <div className="w-8 h-8 category-icon rounded-full flex items-center justify-center text-white text-sm font-medium">