diff --git a/.Jules/palette.md b/.Jules/palette.md
new file mode 100644
index 0000000..bebc6a0
--- /dev/null
+++ b/.Jules/palette.md
@@ -0,0 +1,3 @@
+## 2024-06-03 - Search Shortcut Accessibility
+**Learning:** Adding dynamic keyboard shortcut hints (`⌘F` on Mac, `Ctrl F` on Windows/Linux) inside the search bar significantly improves discoverability without cluttering the UI. When checking for platform (`navigator.platform`), adding a `typeof navigator !== 'undefined'` safety check is vital to prevent potential SSR crashes, even if the app is currently a SPA.
+**Action:** Next time I add OS-specific visual hints, I will ensure proper SSR-safe navigator checks are included, and ensure padding adjustments are made for interactive elements replacing placeholders.
diff --git a/src/features/library/components/LibraryHeader.tsx b/src/features/library/components/LibraryHeader.tsx
index 53fec2a..6b7e0c6 100644
--- a/src/features/library/components/LibraryHeader.tsx
+++ b/src/features/library/components/LibraryHeader.tsx
@@ -57,6 +57,9 @@ export function LibraryHeader({
 }: LibraryHeaderProps) {
   const searchInputRef = useRef<HTMLInputElement>(null)
 
+  const isMac = typeof navigator !== 'undefined' ? navigator.platform.toLowerCase().includes('mac') : false
+  const shortcutText = isMac ? '⌘F' : 'Ctrl F'
+
   useEffect(() => {
     const handleKeyDown = (event: KeyboardEvent) => {
       if (event.defaultPrevented || isEditableElement(event.target)) return
@@ -80,7 +83,7 @@ export function LibraryHeader({
             type="text"
             aria-label="Search your library"
             placeholder="Search your library..."
-            className="w-full rounded-xl border border-slate-200 bg-white py-2 pl-10 pr-10 text-sm text-slate-900 outline-none transition-all placeholder:text-slate-400 focus:border-accent-500 focus:ring-2 focus:ring-accent-500/20 dark:border-slate-700 dark:bg-slate-800 dark:text-slate-100"
+            className="w-full rounded-xl border border-slate-200 bg-white py-2 pl-10 pr-16 text-sm text-slate-900 outline-none transition-all placeholder:text-slate-400 focus:border-accent-500 focus:ring-2 focus:ring-accent-500/20 dark:border-slate-700 dark:bg-slate-800 dark:text-slate-100"
             value={query}
             onChange={(event) => onSetQuery(event.target.value)}
           />
@@ -94,7 +97,11 @@ export function LibraryHeader({
             >
               <X size={14} />
             </button>
-          ) : null}
+          ) : (
+            <div className="pointer-events-none absolute right-3 top-1/2 flex -translate-y-1/2 items-center rounded border border-slate-200 bg-slate-50 px-1.5 py-0.5 text-[10px] font-medium text-slate-400 dark:border-slate-700 dark:bg-slate-800 dark:text-slate-500">
+              {shortcutText}
+            </div>
+          )}
         </div>
       </div>
       <div className="flex items-center gap-2">