diff --git a/src/components/Me.tsx b/src/components/Me.tsx
index d349b811..29f90609 100644
--- a/src/components/Me.tsx
+++ b/src/components/Me.tsx
@@ -171,6 +171,7 @@ const Me: React.FC<MeProps> = ({ relayPool }) => {
         <div className="me-tabs">
           <button
             className={`me-tab ${activeTab === 'highlights' ? 'active' : ''}`}
+            data-tab="highlights"
             onClick={() => setActiveTab('highlights')}
           >
             <FontAwesomeIcon icon={faHighlighter} />
@@ -178,6 +179,7 @@ const Me: React.FC<MeProps> = ({ relayPool }) => {
           </button>
           <button
             className={`me-tab ${activeTab === 'reading-list' ? 'active' : ''}`}
+            data-tab="reading-list"
             onClick={() => setActiveTab('reading-list')}
           >
             <FontAwesomeIcon icon={faBookmark} />
@@ -185,6 +187,7 @@ const Me: React.FC<MeProps> = ({ relayPool }) => {
           </button>
           <button
             className={`me-tab ${activeTab === 'library' ? 'active' : ''}`}
+            data-tab="library"
             onClick={() => setActiveTab('library')}
           >
             <FontAwesomeIcon icon={faBook} />
diff --git a/src/styles/components/me.css b/src/styles/components/me.css
index 0a624bfd..8928347c 100644
--- a/src/styles/components/me.css
+++ b/src/styles/components/me.css
@@ -37,6 +37,12 @@
   border-bottom-color: var(--primary-color, #8b5cf6);
 }
 
+/* Highlights tab uses the user's custom "my highlights" color */
+.me-tab[data-tab="highlights"].active {
+  color: var(--highlight-color-mine, #ffff00);
+  border-bottom-color: var(--highlight-color-mine, #ffff00);
+}
+
 .me-tab svg {
   font-size: 1rem;
 }