diff --git a/src/client/routes/global-items/index.tsx b/src/client/routes/global-items/index.tsx
index eeb3c59..8934772 100644
--- a/src/client/routes/global-items/index.tsx
+++ b/src/client/routes/global-items/index.tsx
@@ -1,4 +1,5 @@
 import { createFileRoute, Link } from "@tanstack/react-router";
+import { ArrowLeft } from "lucide-react";
 import { useEffect, useState } from "react";
 import { GlobalItemCard } from "../../components/GlobalItemCard";
 import { useGlobalItems } from "../../hooks/useGlobalItems";
@@ -23,28 +24,24 @@ function GlobalItemsCatalog() {
 	);
 
 	return (
-		<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-6">
-			<div className="mb-6">
+		<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-4">
+			{/* Back link */}
+			<div className="mb-3">
 				<Link
 					to="/"
-					className="text-sm text-gray-400 hover:text-gray-600 transition-colors"
+					className="inline-flex items-center gap-1.5 text-sm text-gray-500 hover:text-gray-700 transition-colors"
 				>
-					&larr; Dashboard
+					<ArrowLeft className="w-3.5 h-3.5" />
+					Discover
 				</Link>
 			</div>
 
-			<div className="mb-8">
-				<h1 className="text-2xl font-bold text-gray-900 mb-1">
+			{/* Title + search row */}
+			<div className="flex flex-wrap items-center justify-between gap-4 mb-4">
+				<h1 className="text-lg font-semibold text-gray-900">
 					Global Gear Catalog
 				</h1>
-				<p className="text-sm text-gray-500">
-					Browse and discover gear from the shared catalog
-				</p>
-			</div>
-
-			{/* Search */}
-			<div className="mb-8">
-				<div className="relative max-w-md">
+				<div className="relative w-full sm:w-auto sm:max-w-xs">
 					<svg
 						className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-gray-400"
 						fill="none"