diff --git a/src/components/Me.tsx b/src/components/Me.tsx
index 1486cb3f..d4491889 100644
--- a/src/components/Me.tsx
+++ b/src/components/Me.tsx
@@ -267,7 +267,8 @@ const Me: React.FC<MeProps> = ({ relayPool }) => {
             onClick={() => setActiveTab('highlights')}
           >
             <FontAwesomeIcon icon={faHighlighter} />
-            Highlights ({highlights.length})
+            <span className="tab-label">Highlights</span>
+            <span className="tab-count">({highlights.length})</span>
           </button>
           <button
             className={`me-tab ${activeTab === 'reading-list' ? 'active' : ''}`}
@@ -275,7 +276,8 @@ const Me: React.FC<MeProps> = ({ relayPool }) => {
             onClick={() => setActiveTab('reading-list')}
           >
             <FontAwesomeIcon icon={faBookmark} />
-            Reading List ({allIndividualBookmarks.length})
+            <span className="tab-label">Reading List</span>
+            <span className="tab-count">({allIndividualBookmarks.length})</span>
           </button>
           <button
             className={`me-tab ${activeTab === 'archive' ? 'active' : ''}`}
@@ -283,7 +285,8 @@ const Me: React.FC<MeProps> = ({ relayPool }) => {
             onClick={() => setActiveTab('archive')}
           >
             <FontAwesomeIcon icon={faBooks} />
-            Archive ({readArticles.length})
+            <span className="tab-label">Archive</span>
+            <span className="tab-count">({readArticles.length})</span>
           </button>
         </div>
       </div>
diff --git a/src/styles/components/me.css b/src/styles/components/me.css
index 72784ce2..35ab2ec3 100644
--- a/src/styles/components/me.css
+++ b/src/styles/components/me.css
@@ -119,6 +119,11 @@
     margin-right: 0.25rem;
   }
 
+  /* Hide counts on mobile to save space */
+  .me-tab .tab-count {
+    display: none;
+  }
+
   .me-tab-content {
     padding: 1.25rem 0.75rem;
   }