diff --git a/docs/.obsidian/plugins/docs-viewer/main.js b/docs/.obsidian/plugins/docs-viewer/main.js
index 030059c..e6c8eb3 100644
--- a/docs/.obsidian/plugins/docs-viewer/main.js
+++ b/docs/.obsidian/plugins/docs-viewer/main.js
@@ -44,6 +44,10 @@ class TitleAppenderPlugin extends obsidian.Plugin {
                 el.classList.remove('has-sort-value', 'has-title');
                 el.removeAttribute('data-sort-value');
                 el.removeAttribute('data-title');
+                
+                // Also remove any added elements
+                const sortSuffix = el.querySelector('.sort-suffix');
+                if (sortSuffix) sortSuffix.remove();
             });
             
             // Apply classes and attributes for each file with frontmatter
@@ -59,17 +63,28 @@ class TitleAppenderPlugin extends obsidian.Plugin {
                         const fileElement = document.querySelector(`.nav-file-title[data-path="${escapedPath}"] .nav-file-title-content`);
                         
                         if (fileElement) {
-                            // Add sort value if available
-                            if (sortValue !== undefined) {
-                                fileElement.classList.add('has-sort-value');
-                                fileElement.setAttribute('data-sort-value', `[${sortValue}] `);
-                            }
-                            
                             // Add title if available
                             if (title) {
                                 fileElement.classList.add('has-title');
                                 fileElement.setAttribute('data-title', ` (${title})`);
                             }
+                            
+                            // Add sort value if available
+                            if (sortValue !== undefined) {
+                                fileElement.classList.add('has-sort-value');
+                                
+                                // If both title and sort exist, create a span for the sort value
+                                if (title) {
+                                    // Create a span for the sort value to apply different color
+                                    const sortSpan = document.createElement('span');
+                                    sortSpan.className = 'sort-suffix';
+                                    sortSpan.textContent = `[${sortValue}]`;
+                                    fileElement.appendChild(sortSpan);
+                                } else {
+                                    // If only sort exists, use the attribute
+                                    fileElement.setAttribute('data-sort-value', `[${sortValue}]`);
+                                }
+                            }
                         }
                     }
                 } catch (e) {
diff --git a/docs/.obsidian/plugins/docs-viewer/styles.css b/docs/.obsidian/plugins/docs-viewer/styles.css
index 0e0b24b..625623d 100644
--- a/docs/.obsidian/plugins/docs-viewer/styles.css
+++ b/docs/.obsidian/plugins/docs-viewer/styles.css
@@ -38,13 +38,6 @@
     max-width: calc(100% - 10px);
 }
 
-/* Sort value styling */
-.has-sort-value::before {
-    content: attr(data-sort-value);
-    color: var(--color-yellow);
-    margin-right: 2px;
-}
-
 /* Title styling */
 .has-title::after {
     content: attr(data-title);
@@ -52,3 +45,33 @@
     font-size: 0.85em;
     opacity: 0.8;
 }
+
+/* Sort value styling - moved to appear last (after title) */
+.has-sort-value::after {
+    content: attr(data-sort-value);
+    color: var(--color-yellow);
+    margin-left: 4px;
+}
+
+/* Handle case when both title and sort are present - REPLACE THIS */
+.has-title.has-sort-value::after {
+    content: none; /* Remove the combined content */
+}
+
+/* Add separate pseudo-elements for title and sort when both exist */
+.has-title.has-sort-value::after {
+    content: attr(data-title);
+    color: var(--color-orange);
+    font-size: 0.85em;
+    opacity: 0.8;
+}
+
+.has-title.has-sort-value::before {
+    content: none; /* Ensure no content shows before */
+}
+
+/* Add sort value after the title with proper color */
+.has-title.has-sort-value .sort-suffix {
+    color: var(--color-yellow);
+    margin-left: 4px;
+}