feat(website): enhance website

2025-10-31 16:57:58 +01:00 · 2025-04-17 07:21:19 +02:00
parent 6e3a39a4cf
commit 63349f7490
18 changed files with 1264 additions and 487 deletions
--- a/web/package.json
+++ b/web/package.json
@@ -39,6 +39,7 @@
 		"@radix-ui/react-toggle-group": "^1.1.3",
 		"@radix-ui/react-tooltip": "^1.2.0",
 		"@tanstack/react-virtual": "^3.13.6",
+		"canvas-confetti": "^1.9.3",
 		"class-variance-authority": "^0.7.1",
 		"clsx": "^2.1.1",
 		"cmdk": "^1.1.1",
@@ -67,6 +68,7 @@
 	"devDependencies": {
 		"@biomejs/biome": "1.9.4",
 		"@tailwindcss/postcss": "^4.1.3",
+		"@types/canvas-confetti": "^1.9.0",
 		"@types/node": "^22.14.0",
 		"@types/react": "^19.1.0",
 		"@types/react-dom": "^19.1.2",
--- a/web/pnpm-lock.yaml
+++ b/web/pnpm-lock.yaml
@@ -92,6 +92,9 @@ importers:
      '@tanstack/react-virtual':
        specifier: ^3.13.6
        version: 3.13.6(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
+      canvas-confetti:
+        specifier: ^1.9.3
+        version: 1.9.3
      class-variance-authority:
        specifier: ^0.7.1
        version: 0.7.1
@@ -171,6 +174,9 @@ importers:
      '@tailwindcss/postcss':
        specifier: ^4.1.3
        version: 4.1.3
+      '@types/canvas-confetti':
+        specifier: ^1.9.0
+        version: 1.9.0
      '@types/node':
        specifier: ^22.14.0
        version: 22.14.0
@@ -1122,6 +1128,9 @@ packages:
  '@tanstack/virtual-core@3.13.6':
    resolution: {integrity: sha512-cnQUeWnhNP8tJ4WsGcYiX24Gjkc9ALstLbHcBj1t3E7EimN6n6kHH+DPV4PpDnuw00NApQp+ViojMj1GRdwYQg==}

+  '@types/canvas-confetti@1.9.0':
+    resolution: {integrity: sha512-aBGj/dULrimR1XDZLtG9JwxX1b4HPRF6CX9Yfwh3NvstZEm1ZL7RBnel4keCPSqs1ANRu1u2Aoz9R+VmtjYuTg==}
+
  '@types/d3-array@3.2.1':
    resolution: {integrity: sha512-Y2Jn2idRrLzUfAKV2LyRImR+y4oa2AntrgID95SHJxuMUrkNXmanDSed71sRNZysveJVt1hLLemQZIady0FpEg==}

@@ -1181,6 +1190,9 @@ packages:
  caniuse-lite@1.0.30001713:
    resolution: {integrity: sha512-wCIWIg+A4Xr7NfhTuHdX+/FKh3+Op3LBbSp2N5Pfx6T/LhdQy3GTyoTg48BReaW/MyMNZAkTadsBtai3ldWK0Q==}

+  canvas-confetti@1.9.3:
+    resolution: {integrity: sha512-rFfTURMvmVEX1gyXFgn5QMn81bYk70qa0HLzcIOSVEyl57n6o9ItHeBtUSWdvKAPY0xlvBHno4/v3QPrT83q9g==}
+
  class-variance-authority@0.7.1:
    resolution: {integrity: sha512-Ka+9Trutv7G8M6WT6SeiRWz792K5qEqIGEGzXKhAE6xOWAY6pPH8U+9IY3oCMv6kqTmLsv7Xh/2w2RigkePMsg==}

@@ -2673,6 +2685,8 @@ snapshots:

  '@tanstack/virtual-core@3.13.6': {}

+  '@types/canvas-confetti@1.9.0': {}
+
  '@types/d3-array@3.2.1': {}

  '@types/d3-color@3.1.3': {}
@@ -2734,6 +2748,8 @@ snapshots:

  caniuse-lite@1.0.30001713: {}

+  canvas-confetti@1.9.3: {}
+
  class-variance-authority@0.7.1:
    dependencies:
      clsx: 2.1.1
--- a/web/src/app/error.tsx
+++ b/web/src/app/error.tsx
@@ -0,0 +1,51 @@
+"use client"
+
+import { Button } from "@/components/ui/button"
+import { AlertTriangle, ArrowLeft, RefreshCcw } from "lucide-react"
+import Link from "next/link"
+import { useRouter } from "next/navigation"
+import { useEffect } from "react"
+
+export default function ErrorPage({
+	error,
+	reset,
+}: {
+	error: Error & { digest?: string }
+	reset: () => void
+}) {
+	const router = useRouter()
+
+	useEffect(() => {
+		// Log the error to an error reporting service
+		console.error("Application error:", error)
+	}, [error])
+
+	const handleGoBack = () => {
+		router.back()
+	}
+
+	return (
+		<div className="py-16 flex items-center justify-center">
+			<div className="text-center space-y-6 max-w-md">
+				<div className="mx-auto w-16 h-16 bg-red-100 dark:bg-red-900/20 rounded-full flex items-center justify-center text-red-600 dark:text-red-400">
+					<AlertTriangle className="w-8 h-8" />
+				</div>
+				<h1 className="text-2xl font-bold">Something went wrong</h1>
+				<p className="text-muted-foreground">
+					An unexpected error occurred while loading this page. We've been notified and are looking into it.
+				</p>
+				<div className="flex flex-col sm:flex-row gap-4 justify-center pt-4">
+					<Button variant="outline" onClick={() => reset()} className="cursor-pointer">
+						<RefreshCcw className="mr-2 h-4 w-4" />
+						Try again
+					</Button>
+					<Button onClick={handleGoBack} className="cursor-pointer">
+						<ArrowLeft className="mr-2 h-4 w-4" />
+						Go back
+					</Button>
+				</div>
+				{error.digest && <p className="text-xs text-muted-foreground mt-6">Error ID: {error.digest}</p>}
+			</div>
+		</div>
+	)
+}
--- a/web/src/app/icons/components/icon-search.tsx
+++ b/web/src/app/icons/components/icon-search.tsx
@@ -1,67 +1,208 @@
 "use client"

 import { IconSubmissionContent } from "@/components/icon-submission-form"
+import { Badge } from "@/components/ui/badge"
+import { Button } from "@/components/ui/button"
+import {
+	DropdownMenu,
+	DropdownMenuCheckboxItem,
+	DropdownMenuContent,
+	DropdownMenuItem,
+	DropdownMenuLabel,
+	DropdownMenuPortal,
+	DropdownMenuRadioGroup,
+	DropdownMenuRadioItem,
+	DropdownMenuSeparator,
+	DropdownMenuSub,
+	DropdownMenuSubContent,
+	DropdownMenuSubTrigger,
+	DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu"
 import { Input } from "@/components/ui/input"
+import { Separator } from "@/components/ui/separator"
 import { BASE_URL } from "@/constants"
-import type { IconSearchProps } from "@/types/icons"
+import { fuzzySearch } from "@/lib/utils"
+import { cn } from "@/lib/utils"
+import type { Icon, IconSearchProps, IconWithName } from "@/types/icons"
 import { motion } from "framer-motion"
-import { Search } from "lucide-react"
+import { useInView } from "framer-motion"
+import { ArrowDownAZ, ArrowUpZA, Calendar, Filter, Search, SortAsc, X } from "lucide-react"
+import { useTheme } from "next-themes"
 import Image from "next/image"
 import Link from "next/link"
 import { usePathname, useRouter, useSearchParams } from "next/navigation"
-import { useCallback, useEffect, useRef, useState } from "react"
-import { useTheme } from "next-themes"
-import { useInView } from "framer-motion"
+import { useCallback, useEffect, useMemo, useRef, useState } from "react"
+
+type SortOption = "relevance" | "alphabetical-asc" | "alphabetical-desc" | "newest"

 export function IconSearch({ icons }: IconSearchProps) {
 	const searchParams = useSearchParams()
 	const initialQuery = searchParams.get("q")
+	const initialCategories = searchParams.getAll("category")
+	const initialSort = (searchParams.get("sort") as SortOption) || "relevance"
 	const router = useRouter()
 	const pathname = usePathname()
 	const [searchQuery, setSearchQuery] = useState(initialQuery ?? "")
+	const [selectedCategories, setSelectedCategories] = useState<string[]>(initialCategories ?? [])
+	const [sortOption, setSortOption] = useState<SortOption>(initialSort)
 	const timeoutRef = useRef<NodeJS.Timeout | null>(null)
 	const { resolvedTheme } = useTheme()
-	const [filteredIcons, setFilteredIcons] = useState(() => {
-		if (!initialQuery?.trim()) return icons

-		const q = initialQuery.toLowerCase()
-		return icons.filter(({ name, data }) => {
-			if (name.toLowerCase().includes(q)) return true
-			if (data.aliases.some((alias) => alias.toLowerCase().includes(q))) return true
-			if (data.categories.some((category) => category.toLowerCase().includes(q))) return true
+	// Extract all unique categories
+	const allCategories = useMemo(() => {
+		const categories = new Set<string>()
+		for (const icon of icons) {
+			for (const category of icon.data.categories) {
+				categories.add(category)
+			}
+		}
+		return Array.from(categories).sort()
+	}, [icons])

-			return false
-		})
-	})
-	const filterIcons = useCallback(
-		(query: string) => {
-			if (!query.trim()) {
-				return icons
+	// Define filterIconsByQueryAndCategory BEFORE it's used in useState
+	const filterIconsByQueryAndCategories = useCallback((iconList: typeof icons, query: string, categories: string[], sort: SortOption) => {
+		let filtered = iconList
+
+		// Apply category filters (if any are selected)
+		if (categories.length > 0) {
+			filtered = filtered.filter(({ data }) =>
+				// Check if the icon has at least one of the selected categories
+				data.categories.some((cat) => categories.some((selectedCat) => cat.toLowerCase() === selectedCat.toLowerCase())),
+			)
+		}
+
+		// Create a scored version of icons for relevance and other sorting
+		let scoredIcons: { icon: (typeof filtered)[0]; score: number; matchedAlias?: string }[] = []
+
+		// Apply search query filter and calculate scores
+		if (query.trim()) {
+			scoredIcons = filtered.map((icon) => {
+				// Calculate scores for different fields
+				const nameScore = fuzzySearch(icon.name, query) * 1.5 // Give more weight to name matches
+
+				// Find matching alias if any
+				let matchedAlias: string | undefined = undefined
+				let maxAliasScore = 0
+
+				// Check each alias for a match
+				if (icon.data.aliases.length > 0) {
+					for (const alias of icon.data.aliases) {
+						const aliasScore = fuzzySearch(alias, query) * 1.4
+						if (aliasScore > maxAliasScore) {
+							maxAliasScore = aliasScore
+							matchedAlias = alias
+						}
+					}
+				}
+
+				// Get max score from categories
+				const categoryScore =
+					icon.data.categories.length > 0 ? Math.max(...icon.data.categories.map((category) => fuzzySearch(category, query))) : 0
+
+				// Use the highest score
+				const score = Math.max(nameScore, maxAliasScore, categoryScore)
+
+				return {
+					icon,
+					score,
+					matchedAlias: score === maxAliasScore && maxAliasScore > 0 ? matchedAlias : undefined,
+				}
+			})
+
+			// Filter icons with a minimum score
+			scoredIcons = scoredIcons.filter((item) => item.score > 0.2) // Minimum threshold
+
+			// If we're using relevance sorting, apply it now
+			if (sort === "relevance") {
+				// Sort by score
+				scoredIcons.sort((a, b) => b.score - a.score)
+				return scoredIcons.map((item) => item.icon)
 			}

-			const q = query.toLowerCase()
-			return icons.filter(({ name, data }) => {
-				if (name.toLowerCase().includes(q)) return true
-				if (data.aliases.some((alias) => alias.toLowerCase().includes(q))) return true
-				if (data.categories.some((category) => category.toLowerCase().includes(q))) return true
+			// Otherwise, we'll use the filtered results for other sorting methods
+			filtered = scoredIcons.map((item) => item.icon)
+		}

-				return false
+		// Apply sorting if not by relevance (which was already handled above)
+		if (sort === "alphabetical-asc") {
+			return filtered.sort((a, b) => a.name.localeCompare(b.name))
+		}
+		if (sort === "alphabetical-desc") {
+			return filtered.sort((a, b) => b.name.localeCompare(a.name))
+		}
+		if (sort === "newest") {
+			return filtered.sort((a, b) => {
+				return new Date(b.data.update.timestamp).getTime() - new Date(a.data.update.timestamp).getTime()
 			})
-		},
-		[icons],
-	)
+		}
+
+		// Default alphabetical sort if no query or sort option not recognized
+		return filtered.sort((a, b) => a.name.localeCompare(b.name))
+	}, [])
+
+	// Now use the function after it's been defined
+	const [filteredIcons, setFilteredIcons] = useState(() => {
+		return filterIconsByQueryAndCategories(icons, initialQuery ?? "", initialCategories ?? [], initialSort)
+	})
+
+	// Store matched aliases separately
+	const [matchedAliases, setMatchedAliases] = useState<Record<string, string>>({})
+
 	const updateResults = useCallback(
-		(query: string) => {
-			setFilteredIcons(filterIcons(query))
+		(query: string, categories: string[], sort: SortOption) => {
+			// Clear existing matched aliases
+			setMatchedAliases({})
+
+			// If we have a query, capture any matched aliases before filtering
+			if (query.trim()) {
+				const newMatches: Record<string, string> = {}
+				const scoredResults = icons.map((icon) => {
+					// Check for alias matches
+					let bestAliasScore = 0
+					let bestAlias = ""
+					for (const alias of icon.data.aliases) {
+						const score = fuzzySearch(alias, query) * 1.4
+						if (score > bestAliasScore && score > 0.3) {
+							// Only consider strong matches
+							bestAliasScore = score
+							bestAlias = alias
+						}
+					}
+
+					// If the name match is weaker than alias match, store the alias
+					const nameScore = fuzzySearch(icon.name, query) * 1.5
+					if (bestAliasScore > nameScore && bestAliasScore > 0.3) {
+						newMatches[icon.name] = bestAlias
+					}
+
+					return { icon }
+				})
+
+				// Update the matched aliases
+				setMatchedAliases(newMatches)
+			}
+
+			// Continue with normal filtering
+			setFilteredIcons(filterIconsByQueryAndCategories(icons, query, categories, sort))
 			const params = new URLSearchParams()
 			if (query) params.set("q", query)

-			const newUrl = query ? `${pathname}?${params.toString()}` : pathname
+			// Clear existing category params and add new ones
+			for (const category of categories) {
+				params.append("category", category)
+			}

+			// Add sort parameter if not default
+			if (sort !== "relevance" || initialSort !== "relevance") {
+				params.set("sort", sort)
+			}
+
+			const newUrl = params.toString() ? `${pathname}?${params.toString()}` : pathname
 			router.push(newUrl, { scroll: false })
 		},
-		[filterIcons, pathname, router],
+		[filterIconsByQueryAndCategories, icons, pathname, router, initialSort],
 	)
+
 	const handleSearch = useCallback(
 		(query: string) => {
 			setSearchQuery(query)
@@ -69,11 +210,45 @@ export function IconSearch({ icons }: IconSearchProps) {
 				clearTimeout(timeoutRef.current)
 			}
 			timeoutRef.current = setTimeout(() => {
-				updateResults(query)
+				updateResults(query, selectedCategories, sortOption)
 			}, 100)
 		},
-		[updateResults],
+		[updateResults, selectedCategories, sortOption],
 	)
+
+	const handleCategoryChange = useCallback(
+		(category: string) => {
+			let newCategories: string[]
+
+			if (selectedCategories.includes(category)) {
+				// Remove the category if it's already selected
+				newCategories = selectedCategories.filter((c) => c !== category)
+			} else {
+				// Add the category if it's not selected
+				newCategories = [...selectedCategories, category]
+			}
+
+			setSelectedCategories(newCategories)
+			updateResults(searchQuery, newCategories, sortOption)
+		},
+		[updateResults, searchQuery, selectedCategories, sortOption],
+	)
+
+	const handleSortChange = useCallback(
+		(sort: SortOption) => {
+			setSortOption(sort)
+			updateResults(searchQuery, selectedCategories, sort)
+		},
+		[updateResults, searchQuery, selectedCategories],
+	)
+
+	const clearFilters = useCallback(() => {
+		setSearchQuery("")
+		setSelectedCategories([])
+		setSortOption("relevance")
+		updateResults("", [], "relevance")
+	}, [updateResults])
+
 	useEffect(() => {
 		return () => {
 			if (timeoutRef.current) {
@@ -83,40 +258,216 @@ export function IconSearch({ icons }: IconSearchProps) {
 	}, [])

 	// Helper function to get the appropriate icon variant based on theme
-	const getIconVariant = (name: string, data: any) => {
+	const getIconVariant = (name: string, data: Icon) => {
 		// Check if the icon has theme variants and use appropriate one
 		if (data.colors) {
 			// If in dark mode and a light variant exists, use the light variant
-			if (resolvedTheme === 'dark' && data.colors.light) {
-				return data.colors.light;
+			if (resolvedTheme === "dark" && data.colors.light) {
+				return data.colors.light
 			}
 			// If in light mode and a dark variant exists, use the dark variant
-			else if (resolvedTheme === 'light' && data.colors.dark) {
-				return data.colors.dark;
+			if (resolvedTheme === "light" && data.colors.dark) {
+				return data.colors.dark
 			}
 		}
 		// Fall back to the default name if no appropriate variant
-		return name;
+		return name
 	}

 	if (!searchParams) return null

+	const getSortLabel = (sort: SortOption) => {
+		switch (sort) {
+			case "relevance":
+				return "Best match"
+			case "alphabetical-asc":
+				return "A to Z"
+			case "alphabetical-desc":
+				return "Z to A"
+			case "newest":
+				return "Newest first"
+			default:
+				return "Sort"
+		}
+	}
+
+	const getSortIcon = (sort: SortOption) => {
+		switch (sort) {
+			case "relevance":
+				return <Search className="h-4 w-4" />
+			case "alphabetical-asc":
+				return <ArrowDownAZ className="h-4 w-4" />
+			case "alphabetical-desc":
+				return <ArrowUpZA className="h-4 w-4" />
+			case "newest":
+				return <Calendar className="h-4 w-4" />
+			default:
+				return <SortAsc className="h-4 w-4" />
+		}
+	}
+
 	return (
 		<>
 			<motion.div
-				className="relative w-full sm:max-w-md"
+				className="space-y-4 w-full"
 				initial={{ opacity: 0, y: 10 }}
 				animate={{ opacity: 1, y: 0 }}
 				transition={{ duration: 0.5 }}
 			>
-				<Search className="absolute left-2.5 top-1/2 transform -translate-y-1/2 h-4 w-4 text-muted-foreground transition-all duration-300" />
-				<Input
-					type="search"
-					placeholder="Search icons by name, aliases, or categories..."
-					className="w-full pl-8 cursor-text transition-all duration-300 text-sm md:text-base"
-					value={searchQuery}
-					onChange={(e) => handleSearch(e.target.value)}
-				/>
+				{/* Search input */}
+				<div className="relative w-full">
+					<div className="absolute left-3 top-1/2 transform -translate-y-1/2 text-muted-foreground transition-all duration-300">
+						<Search className="h-4 w-4" />
+					</div>
+					<Input
+						type="search"
+						placeholder="Search icons by name, alias, or category..."
+						className="w-full h-10 pl-9 cursor-text transition-all duration-300 text-sm md:text-base bg-background/80 dark:bg-background/90 border-border shadow-sm hover:border-rose-500/50 focus-visible:ring-rose-500/20"
+						value={searchQuery}
+						onChange={(e) => handleSearch(e.target.value)}
+					/>
+				</div>
+
+				{/* Filter and sort controls */}
+				<div className="flex flex-wrap gap-2 justify-start">
+					{/* Filter dropdown */}
+					<DropdownMenu>
+						<DropdownMenuTrigger asChild>
+							<Button
+								variant="outline"
+								size="sm"
+								className="flex-1 sm:flex-none cursor-pointer bg-background/80 dark:bg-background/90 border-border shadow-sm hover:bg-rose-500/10 dark:hover:bg-rose-900/20 hover:border-rose-500"
+							>
+								<Filter className="h-4 w-4 mr-2" />
+								<span>Filter</span>
+								{selectedCategories.length > 0 && (
+									<Badge variant="secondary" className="ml-2 px-1.5">
+										{selectedCategories.length}
+									</Badge>
+								)}
+							</Button>
+						</DropdownMenuTrigger>
+						<DropdownMenuContent align="start" className="w-64 sm:w-56">
+							<DropdownMenuLabel className="font-semibold">Categories</DropdownMenuLabel>
+							<DropdownMenuSeparator />
+
+							<div className="max-h-[40vh] overflow-y-auto p-1">
+								{allCategories.map((category) => (
+									<DropdownMenuCheckboxItem
+										key={category}
+										checked={selectedCategories.includes(category)}
+										onCheckedChange={() => handleCategoryChange(category)}
+										className="cursor-pointer capitalize"
+									>
+										{category.replace(/-/g, " ").replace(/\b\w/g, (c) => c.toUpperCase())}
+									</DropdownMenuCheckboxItem>
+								))}
+							</div>
+
+							{selectedCategories.length > 0 && (
+								<>
+									<DropdownMenuSeparator />
+									<DropdownMenuItem
+										onClick={() => {
+											setSelectedCategories([])
+											updateResults(searchQuery, [], sortOption)
+										}}
+										className="cursor-pointer text-rose-500 focus:text-rose-500 focus:bg-rose-50 dark:focus:bg-rose-950/20"
+									>
+										Clear all filters
+									</DropdownMenuItem>
+								</>
+							)}
+						</DropdownMenuContent>
+					</DropdownMenu>
+
+					{/* Sort dropdown */}
+					<DropdownMenu>
+						<DropdownMenuTrigger asChild>
+							<Button
+								variant="outline"
+								size="sm"
+								className="flex-1 sm:flex-none cursor-pointer bg-background/80 dark:bg-background/90 border-border shadow-sm hover:bg-rose-500/10 dark:hover:bg-rose-900/20 hover:border-rose-500"
+							>
+								{getSortIcon(sortOption)}
+								<span className="ml-2">{getSortLabel(sortOption)}</span>
+							</Button>
+						</DropdownMenuTrigger>
+						<DropdownMenuContent align="start" className="w-56">
+							<DropdownMenuLabel className="font-semibold">Sort By</DropdownMenuLabel>
+							<DropdownMenuSeparator />
+							<DropdownMenuRadioGroup value={sortOption} onValueChange={(value) => handleSortChange(value as SortOption)}>
+								<DropdownMenuRadioItem value="relevance" className="cursor-pointer">
+									<Search className="h-4 w-4 mr-2" />
+									Best match
+								</DropdownMenuRadioItem>
+								<DropdownMenuRadioItem value="alphabetical-asc" className="cursor-pointer">
+									<ArrowDownAZ className="h-4 w-4 mr-2" />A to Z
+								</DropdownMenuRadioItem>
+								<DropdownMenuRadioItem value="alphabetical-desc" className="cursor-pointer">
+									<ArrowUpZA className="h-4 w-4 mr-2" />Z to A
+								</DropdownMenuRadioItem>
+								<DropdownMenuRadioItem value="newest" className="cursor-pointer">
+									<Calendar className="h-4 w-4 mr-2" />
+									Newest first
+								</DropdownMenuRadioItem>
+							</DropdownMenuRadioGroup>
+						</DropdownMenuContent>
+					</DropdownMenu>
+
+					{/* Clear all button */}
+					{(searchQuery || selectedCategories.length > 0 || sortOption !== "relevance") && (
+						<Button
+							variant="outline"
+							size="sm"
+							onClick={clearFilters}
+							className="flex-1 sm:flex-none cursor-pointer bg-background/80 dark:bg-background/90 hover:bg-rose-500/10 dark:hover:bg-rose-900/20 border-rose-500/20"
+						>
+							<X className="h-4 w-4 mr-2" />
+							<span>Clear all</span>
+						</Button>
+					)}
+				</div>
+
+				{/* Active filter badges */}
+				{selectedCategories.length > 0 && (
+					<div className="flex flex-wrap items-center gap-2 mt-2">
+						<span className="text-sm text-muted-foreground">Filters:</span>
+						<div className="flex flex-wrap gap-2">
+							{selectedCategories.map((category) => (
+								<Badge
+									key={category}
+									variant="secondary"
+									className="flex items-center gap-1 pl-2 pr-1 bg-rose-500/10 dark:bg-rose-900/20 text-rose-700 dark:text-rose-300 border border-rose-500/20"
+								>
+									{category.replace(/-/g, " ").replace(/\b\w/g, (c) => c.toUpperCase())}
+									<Button
+										variant="ghost"
+										size="sm"
+										className="h-4 w-4 p-0 hover:bg-transparent cursor-pointer"
+										onClick={() => handleCategoryChange(category)}
+									>
+										<X className="h-3 w-3" />
+									</Button>
+								</Badge>
+							))}
+						</div>
+
+						<Button
+							variant="ghost"
+							size="sm"
+							onClick={() => {
+								setSelectedCategories([])
+								updateResults(searchQuery, [], sortOption)
+							}}
+							className="text-xs h-7 px-2 text-rose-500 hover:text-rose-600 hover:bg-rose-500/10 cursor-pointer"
+						>
+							Clear all
+						</Button>
+					</div>
+				)}
+
+				<Separator className="my-2" />
 			</motion.div>

 			{filteredIcons.length === 0 ? (
@@ -127,32 +478,61 @@ export function IconSearch({ icons }: IconSearchProps) {
 					transition={{ duration: 0.5, delay: 0.2 }}
 				>
 					<div className="text-center">
-						<h2 className="text-5xl font-semibold">We don't have this one...yet!</h2>
+						<h2 className="text-3xl sm:text-5xl font-semibold">We don't have this one...yet!</h2>
+						<p className="mt-4 text-muted-foreground">
+							{searchQuery && selectedCategories.length > 0
+								? `No icons found matching "${searchQuery}" with the selected filters.`
+								: searchQuery
+									? `No icons found matching "${searchQuery}".`
+									: selectedCategories.length > 0
+										? "No icons found with the selected filters."
+										: "No icons found matching your criteria."}
+						</p>
+						<Button variant="outline" className="mt-4 cursor-pointer" onClick={clearFilters}>
+							Clear all filters
+						</Button>
 					</div>
 					<IconSubmissionContent />
 				</motion.div>
 			) : (
-				<div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-6 xl:grid-cols-8 gap-4 mt-8">
-					{filteredIcons.map(({ name, data }, index) => (
-						<IconCard key={name} name={name} data={data} getIconVariant={getIconVariant} />
-					))}
-				</div>
+				<>
+					<div className="flex justify-between items-center pb-2">
+						<p className="text-sm text-muted-foreground">
+							Found {filteredIcons.length} icon{filteredIcons.length !== 1 ? "s" : ""}.
+						</p>
+						<div className="flex items-center gap-1 text-xs text-muted-foreground">
+							{getSortIcon(sortOption)}
+							<span>{getSortLabel(sortOption)}</span>
+						</div>
+					</div>
+					<div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-6 xl:grid-cols-8 gap-4 mt-2">
+						{filteredIcons.map(({ name, data }) => (
+							<IconCard key={name} name={name} data={data} getIconVariant={getIconVariant} matchedAlias={matchedAliases[name] || null} />
+						))}
+					</div>
+				</>
 			)}
 		</>
 	)
 }

-function IconCard({ name, data, getIconVariant }: {
-	name: string;
-	data: any;
-	getIconVariant: (name: string, data: any) => string;
+function IconCard({
+	name,
+	data,
+	getIconVariant,
+	matchedAlias,
+}: {
+	name: string
+	data: Icon
+	getIconVariant: (name: string, data: Icon) => string
+	matchedAlias?: string | null
 }) {
-	const ref = useRef(null);
+	const ref = useRef(null)
 	const isInView = useInView(ref, {
 		once: false,
 		amount: 0.2,
-		margin: "100px 0px"
-	});
+		margin: "100px 0px",
+	})

 	const variants = {
 		hidden: { opacity: 0, y: 20, scale: 0.95 },
@@ -160,15 +540,15 @@ function IconCard({ name, data, getIconVariant }: {
 			opacity: 1,
 			y: 0,
 			scale: 1,
-			transition: { duration: 0.4, ease: [0.25, 0.1, 0.25, 1.0] }
+			transition: { duration: 0.4, ease: [0.25, 0.1, 0.25, 1.0] },
 		},
 		exit: {
 			opacity: 0,
 			y: -10,
 			scale: 0.98,
-			transition: { duration: 0.3, ease: [0.25, 0.1, 0.25, 1.0] }
-		}
-	};
+			transition: { duration: 0.3, ease: [0.25, 0.1, 0.25, 1.0] },
+		},
+	}

 	return (
 		<motion.div
@@ -182,7 +562,7 @@ function IconCard({ name, data, getIconVariant }: {
 			<Link
 				prefetch={false}
 				href={`/icons/${name}`}
-				className="group flex flex-col items-center p-3 sm:p-4 rounded-lg border border-border bg-background/95 dark:bg-background/80 hover:border-rose-500 hover:bg-rose-500/10 dark:hover:bg-rose-900/30 dark:hover:border-rose-500 transition-all duration-300 hover:shadow-lg hover:shadow-rose-500/5 relative overflow-hidden"
+				className="group flex flex-col items-center p-3 sm:p-4 rounded-lg border border-border bg-background hover:border-rose-500 hover:bg-rose-500/10 dark:hover:bg-rose-900/30 dark:hover:border-rose-500 transition-all duration-300 hover:shadow-lg hover:shadow-rose-500/5 relative overflow-hidden cursor-pointer"
 			>
 				<div className="absolute inset-0 bg-gradient-to-br from-rose-500/5 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300" />

@@ -197,7 +577,11 @@ function IconCard({ name, data, getIconVariant }: {
 				<span className="text-xs sm:text-sm text-center truncate w-full capitalize group-hover:text-rose-600 dark:group-hover:text-rose-400 transition-colors duration-200 font-medium">
 					{name.replace(/-/g, " ")}
 				</span>
+
+				{matchedAlias && (
+					<span className="text-[10px] text-center truncate w-full text-rose-500 dark:text-rose-400 mt-1">Alias: {matchedAlias}</span>
+				)}
 			</Link>
 		</motion.div>
-	);
+	)
 }
--- a/web/src/app/not-found.tsx
+++ b/web/src/app/not-found.tsx
@@ -1,5 +1,6 @@
+import { IconSubmissionContent } from "@/components/icon-submission-form"
 import { Button } from "@/components/ui/button"
-import { AlertTriangle, ArrowLeft } from "lucide-react"
+import { AlertTriangle, ArrowLeft, PlusCircle } from "lucide-react"
 import Link from "next/link"

 export default function NotFound({
@@ -9,21 +10,38 @@ export default function NotFound({
 }) {
 	return (
 		<div className="py-16 flex items-center justify-center">
-			<div className="text-center space-y-6 max-w-md">
-				<div className="mx-auto w-16 h-16 bg-red-100 dark:bg-red-900/20 rounded-full flex items-center justify-center text-red-600 dark:text-red-400">
-					<AlertTriangle className="w-8 h-8" />
+			<div className="text-center space-y-8 max-w-2xl mx-auto">
+				<div className="flex flex-col items-center">
+					<div className="mx-auto w-16 h-16 bg-red-100 dark:bg-red-900/20 rounded-full flex items-center justify-center text-red-600 dark:text-red-400">
+						<AlertTriangle className="w-8 h-8" />
+					</div>
+					<h1 className="text-2xl sm:text-3xl font-bold mt-6">Icon not found</h1>
+					<p className="text-muted-foreground mt-3 max-w-md">
+						The icon you are looking for could not be found or there was an error loading it.
+					</p>
 				</div>
-				<h1 className="text-2xl font-bold">Icon not found</h1>
-				<p className="text-muted-foreground">The icon you are looking for could not be found or there was an error loading it.</p>
-				<p className="text-muted-foreground">If you believe this is an error, please contact the maintainers of the repository.</p>
-				<div className="flex flex-col sm:flex-row gap-4 justify-center pt-4">
-					<Button asChild>
+
+				<div className="flex flex-col sm:flex-row gap-4 justify-center">
+					<Button asChild variant="outline">
 						<Link href="/icons">
 							<ArrowLeft className="mr-2 h-4 w-4" />
 							Back to all icons
 						</Link>
 					</Button>
 				</div>
+
+				<div className="border-t border-border pt-8 mt-8">
+					<div className="text-center mb-6">
+						<h2 className="text-xl font-semibold">Can't find what you're looking for?</h2>
+						<p className="text-muted-foreground mt-2">
+							Contribute to our icon collection by suggesting a new icon or improving an existing one.
+						</p>
+					</div>
+
+					<div className="mt-6">
+						<IconSubmissionContent />
+					</div>
+				</div>
 			</div>
 		</div>
 	)
--- a/web/src/components/client-header.tsx
+++ b/web/src/components/client-header.tsx
@@ -1,161 +0,0 @@
-"use client"
-
-import { IconSubmissionForm } from "@/components/icon-submission-form"
-import { ThemeSwitcher } from "@/components/theme-switcher"
-import { REPO_PATH } from "@/constants"
-import { getAllIcons } from "@/lib/api"
-import type { Icon } from "@/types/icons"
-import { motion } from "framer-motion"
-import { Github, Menu, Search } from "lucide-react"
-import Link from "next/link"
-import { useEffect, useState } from "react"
-import { CommandMenu } from "./command-menu"
-import { HeaderNav } from "./header-nav"
-import { Button } from "./ui/button"
-import { Sheet, SheetContent, SheetTrigger } from "./ui/sheet"
-import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "./ui/tooltip"
-
-export function ClientHeader() {
-	const [icons, setIcons] = useState<Record<string, Icon>>({})
-	const [isLoaded, setIsLoaded] = useState(false)
-
-	useEffect(() => {
-		async function loadIcons() {
-			try {
-				const iconsData = await getAllIcons()
-				setIcons(iconsData)
-				setIsLoaded(true)
-			} catch (error) {
-				console.error("Failed to load icons:", error)
-				setIsLoaded(true)
-			}
-		}
-
-		loadIcons()
-	}, [])
-
-	return (
-		<motion.header
-			className="border-b sticky top-0 z-50 bg-background/95 backdrop-blur-md border-border/50"
-			initial={{ y: -20, opacity: 0 }}
-			animate={{ y: 0, opacity: 1 }}
-			transition={{ duration: 0.3, ease: "easeOut" }}
-		>
-			<div className="px-4 md:px-12 flex items-center justify-between h-16 md:h-18">
-				<div className="flex items-center gap-2 md:gap-6">
-					<Link href="/" className="text-lg md:text-xl font-bold group">
-						<span className="transition-colors duration-300 group-hover:text-rose-500">Dashboard Icons</span>
-					</Link>
-					<div className="hidden md:block">
-						<HeaderNav />
-					</div>
-				</div>
-				<div className="flex items-center gap-2 md:gap-4">
-					{/* Desktop search button */}
-					<div className="hidden md:block">
-						<TooltipProvider>
-							<Tooltip>
-								<TooltipTrigger asChild>
-									<Button
-										variant="outline"
-										size="sm"
-										className="gap-2 cursor-pointer hover:bg-rose-500/10 dark:hover:bg-rose-900/30 hover:border-rose-500 dark:hover:border-rose-500 transition-colors duration-200 shadow-sm"
-										id="desktop-search-button"
-									>
-										<Search className="h-4 w-4" />
-										<span>Search</span>
-										<kbd className="pointer-events-none inline-flex h-5 select-none items-center gap-1 rounded border border-border/80 bg-muted/80 px-1.5 font-mono text-[10px] font-medium opacity-100">
-											<span className="text-xs">⌘</span>K
-										</kbd>
-									</Button>
-								</TooltipTrigger>
-								<TooltipContent>
-									<p>Search icons</p>
-								</TooltipContent>
-							</Tooltip>
-						</TooltipProvider>
-					</div>
-
-					{/* Mobile search button */}
-					<div className="md:hidden">
-						<Button
-							variant="ghost"
-							size="icon"
-							className="rounded-lg cursor-pointer hover:bg-rose-500/10 dark:hover:bg-rose-900/30 transition-colors duration-200 focus:ring-2 focus:ring-rose-500/20"
-							id="mobile-search-button"
-						>
-							<Search className="h-5 w-5" />
-							<span className="sr-only">Search icons</span>
-						</Button>
-					</div>
-
-					<div className="hidden md:flex items-center gap-2 md:gap-4">
-						{isLoaded && <CommandMenu icons={Object.keys(icons)} triggerButtonId="desktop-search-button" />}
-						<IconSubmissionForm />
-						<TooltipProvider>
-							<Tooltip>
-								<TooltipTrigger asChild>
-									<Button
-										variant="ghost"
-										size="icon"
-										className="rounded-lg cursor-pointer hover:bg-rose-500/10 dark:hover:bg-rose-900/30 transition-colors duration-200 focus:ring-2 focus:ring-rose-500/20"
-										asChild
-									>
-										<Link href={REPO_PATH} target="_blank" className="group">
-											<Github className="h-5 w-5 group-hover:text-rose-500 transition-colors duration-200" />
-											<span className="sr-only">GitHub</span>
-										</Link>
-									</Button>
-								</TooltipTrigger>
-								<TooltipContent>
-									<p>GitHub</p>
-								</TooltipContent>
-							</Tooltip>
-						</TooltipProvider>
-					</div>
-					<ThemeSwitcher />
-
-					{/* Mobile menu */}
-					<div className="md:hidden">
-						<Sheet>
-							<SheetTrigger asChild>
-								<Button
-									variant="ghost"
-									size="icon"
-									className="h-10 w-10 rounded-full cursor-pointer hover:bg-rose-500/10 dark:hover:bg-rose-900/30 transition-colors duration-200 focus:ring-2 focus:ring-rose-500/20"
-								>
-									<Menu className="h-5 w-5" />
-									<span className="sr-only">Toggle menu</span>
-								</Button>
-							</SheetTrigger>
-							<SheetContent side="right" className="w-[280px] sm:w-[320px] p-0">
-								<div className="flex flex-col h-full py-6">
-									<div className="px-6 mb-6">
-										<h2 className="text-xl font-bold text-rose-500">Dashboard Icons</h2>
-									</div>
-
-									<div className="flex-1 overflow-auto px-6">
-										<nav className="space-y-6">
-											<HeaderNav />
-											<div className="border-t pt-6" />
-											{isLoaded && <CommandMenu icons={Object.keys(icons)} triggerButtonId="mobile-search-button" />}
-											<IconSubmissionForm />
-											<Link
-												href={REPO_PATH}
-												target="_blank"
-												className="flex items-center gap-2 text-sm font-medium text-rose-500 hover:text-rose-600 transition-colors cursor-pointer p-2 hover:bg-rose-500/5 rounded-md"
-											>
-												<Github className="h-4 w-4" />
-												GitHub Repository
-											</Link>
-										</nav>
-									</div>
-								</div>
-							</SheetContent>
-						</Sheet>
-					</div>
-				</div>
-			</div>
-		</motion.header>
-	)
-}
--- a/web/src/components/command-menu.tsx
+++ b/web/src/components/command-menu.tsx
@@ -1,103 +1,137 @@
 "use client"

+import { CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList } from "@/components/ui/command"
+import { useMediaQuery } from "@/hooks/use-media-query"
+import { fuzzySearch } from "@/lib/utils"
+import { Icon } from "@/types/icons"
 import { useRouter } from "next/navigation"
-import * as React from "react"
-
-import { Button } from "@/components/ui/button"
-import { CommandDialog, CommandEmpty, CommandInput, CommandItem, CommandList } from "@/components/ui/command"
-import { ImageIcon, Search } from "lucide-react"
-import Link from "next/link"
+import { useCallback, useEffect, useState } from "react"

 interface CommandMenuProps {
-	icons: string[]
+	icons: {
+		name: string
+		data: {
+			categories: string[]
+			aliases: string[]
+			[key: string]: unknown
+		}
+	}[]
 	triggerButtonId?: string
-	displayAsButton?: boolean
+	open?: boolean
+	onOpenChange?: (open: boolean) => void
 }

-export function CommandMenu({ icons, triggerButtonId, displayAsButton = false }: CommandMenuProps) {
+export function CommandMenu({ icons, open: externalOpen, onOpenChange: externalOnOpenChange }: CommandMenuProps) {
 	const router = useRouter()
-	const [open, setOpen] = React.useState(false)
-	const [mounted, setMounted] = React.useState(false)
-	const [inputValue, setInputValue] = React.useState("")
-	const getFilteredIcons = React.useCallback(() => {
-		const query = inputValue.toLowerCase().trim()
-		if (!query) return icons.slice(0, 75)
-		return icons.filter((icon) => {
-			const iconName = icon.toLowerCase()
-			if (iconName.includes(query)) return true
-			const parts = query.split(/\s+/)
-			let lastIndex = -1
-			return parts.every((part) => {
-				const index = iconName.indexOf(part, lastIndex + 1)
-				if (index === -1) return false
-				lastIndex = index
-				return true
-			})
-		})
-	}, [icons, inputValue])
+	const [internalOpen, setInternalOpen] = useState(false)
+	const [query, setQuery] = useState("")
+	const isDesktop = useMediaQuery("(min-width: 768px)")

-	const filteredIcons = getFilteredIcons()
+	// Use either external or internal state for controlling open state
+	const isOpen = externalOpen !== undefined ? externalOpen : internalOpen

-	React.useEffect(() => {
-		setMounted(true)
-	}, [])
+	// Wrap setIsOpen in useCallback to fix dependency issue
+	const setIsOpen = useCallback(
+		(value: boolean) => {
+			if (externalOnOpenChange) {
+				externalOnOpenChange(value)
+			} else {
+				setInternalOpen(value)
+			}
+		},
+		[externalOnOpenChange],
+	)

-	React.useEffect(() => {
-		const down = (e: KeyboardEvent) => {
-			if (e.key === "k" && (e.metaKey || e.ctrlKey)) {
+	const filteredIcons = getFilteredIcons(icons, query)
+
+	useEffect(() => {
+		const handleKeyDown = (e: KeyboardEvent) => {
+			if (
+				(e.key === "k" && (e.metaKey || e.ctrlKey)) ||
+				(e.key === "/" && document.activeElement?.tagName !== "INPUT" && document.activeElement?.tagName !== "TEXTAREA")
+			) {
 				e.preventDefault()
-				setOpen((open) => !open)
+				setIsOpen(!isOpen)
 			}
 		}

-		document.addEventListener("keydown", down)
-		return () => document.removeEventListener("keydown", down)
-	}, [])
+		document.addEventListener("keydown", handleKeyDown)
+		return () => document.removeEventListener("keydown", handleKeyDown)
+	}, [isOpen, setIsOpen])

-	// Effect to connect to external trigger button
-	React.useEffect(() => {
-		if (!triggerButtonId || !mounted) return
-
-		const triggerButton = document.getElementById(triggerButtonId)
-		if (!triggerButton) return
-
-		const handleClick = () => {
-			setOpen(true)
+	function getFilteredIcons(iconList: CommandMenuProps["icons"], query: string) {
+		if (!query) {
+			// Return a limited number of icons when no query is provided
+			return iconList.slice(0, 8)
 		}

-		triggerButton.addEventListener("click", handleClick)
-		return () => triggerButton.removeEventListener("click", handleClick)
-	}, [triggerButtonId, mounted])
+		// Calculate scores for each icon
+		const scoredIcons = iconList.map((icon) => {
+			// Calculate scores for different fields
+			const nameScore = fuzzySearch(icon.name, query) * 2.0 // Give more weight to name matches

-	const handleInputChange = React.useCallback((value: string) => {
-		setInputValue(value)
-	}, [])
+			// Get max score from aliases
+			const aliasScore =
+				icon.data.aliases && icon.data.aliases.length > 0
+					? Math.max(...icon.data.aliases.map((alias) => fuzzySearch(alias, query))) * 1.8 // Increased weight for aliases
+					: 0

-	const handleSelectIcon = React.useCallback(
-		(iconName: string) => {
-			router.push(`/icons/${iconName}`)
-			setOpen(false)
-		},
-		[router],
-	)
+			// Get max score from categories
+			const categoryScore =
+				icon.data.categories && icon.data.categories.length > 0
+					? Math.max(...icon.data.categories.map((category) => fuzzySearch(category, query)))
+					: 0

-	if (!mounted) return null
+			// Use the highest score
+			const score = Math.max(nameScore, aliasScore, categoryScore)
+
+			return { icon, score, matchedField: score === nameScore ? "name" : score === aliasScore ? "alias" : "category" }
+		})
+
+		// Filter icons with a minimum score and sort by highest score
+		return scoredIcons
+			.filter((item) => item.score > 0.3) // Higher threshold for more accurate results
+			.sort((a, b) => b.score - a.score)
+			.slice(0, 20) // Limit the number of results
+			.map((item) => item.icon)
+	}
+
+	const handleSelect = (name: string) => {
+		setIsOpen(false)
+		router.push(`/icons/${name}`)
+	}

 	return (
-		<CommandDialog open={open} onOpenChange={setOpen}>
-			<CommandInput placeholder="Type to search icons..." value={inputValue} onValueChange={handleInputChange} />
-			<CommandList className="max-h-[300px]">
-				{filteredIcons.length === 0 && <CommandEmpty>No results found. Try a different search term.</CommandEmpty>}
-				{filteredIcons.map((icon) => (
-					<CommandItem key={icon} onSelect={() => handleSelectIcon(icon)} className="cursor-pointer">
-						<Link prefetch={filteredIcons.length < 3} href={`/icons/${icon}`} className="flex items-center gap-2 w-full">
-							<span className="text-rose-500">
-								<ImageIcon className="h-4 w-4" />
-							</span>
-							<span className="capitalize">{icon.replace(/-/g, " ")}</span>
-						</Link>
-					</CommandItem>
-				))}
+		<CommandDialog open={isOpen} onOpenChange={setIsOpen}>
+			<CommandInput placeholder="Search for icons by name, category, or purpose..." value={query} onValueChange={setQuery} />
+			<CommandList>
+				<CommandEmpty>No matching icons found. Try a different search term or browse all icons.</CommandEmpty>
+				<CommandGroup heading="Icons">
+					{filteredIcons.map(({ name, data }) => {
+						// Find matched alias for display if available
+						const matchedAlias =
+							query && data.aliases && data.aliases.length > 0
+								? data.aliases.find((alias) => alias.toLowerCase().includes(query.toLowerCase()))
+								: null
+
+						return (
+							<CommandItem key={name} value={name} onSelect={() => handleSelect(name)} className="flex items-center gap-2 cursor-pointer">
+								<div className="flex-shrink-0 h-5 w-5 relative">
+									<div className="h-5 w-5 bg-rose-100 dark:bg-rose-900/30 rounded-md flex items-center justify-center">
+										<span className="text-[10px] font-medium text-rose-800 dark:text-rose-300">{name.substring(0, 2).toUpperCase()}</span>
+									</div>
+								</div>
+								<span className="flex-grow capitalize">{name.replace(/-/g, " ")}</span>
+								{matchedAlias && <span className="text-xs text-primary-500 truncate max-w-[100px]">alias: {matchedAlias}</span>}
+								{!matchedAlias && data.categories && data.categories.length > 0 && (
+									<span className="text-xs text-muted-foreground truncate max-w-[100px]">
+										{data.categories[0].replace(/-/g, " ").replace(/\b\w/g, (c) => c.toUpperCase())}
+									</span>
+								)}
+							</CommandItem>
+						)
+					})}
+				</CommandGroup>
 			</CommandList>
 		</CommandDialog>
 	)
--- a/web/src/components/footer.tsx
+++ b/web/src/components/footer.tsx
@@ -4,8 +4,30 @@ import { REPO_PATH } from "@/constants"
 import { motion } from "framer-motion"
 import { ExternalLink, Github, Heart } from "lucide-react"
 import Link from "next/link"
+import { useState } from "react"
+
+// Pre-define unique IDs for animations to avoid using array indices as keys
+const HOVER_HEART_IDS = [
+	"hover-heart-1",
+	"hover-heart-2",
+	"hover-heart-3",
+	"hover-heart-4",
+	"hover-heart-5",
+	"hover-heart-6",
+	"hover-heart-7",
+	"hover-heart-8",
+]
+const BURST_HEART_IDS = ["burst-heart-1", "burst-heart-2", "burst-heart-3", "burst-heart-4", "burst-heart-5"]

 export function Footer() {
+	const [isHeartHovered, setIsHeartHovered] = useState(false)
+	const [isHeartFilled, setIsHeartFilled] = useState(false)
+
+	// Toggle heart fill state and add extra mini hearts on click
+	const handleHeartClick = () => {
+		setIsHeartFilled(!isHeartFilled)
+	}
+
 	return (
 		<footer className="border-t py-12 bg-background relative overflow-hidden">
 			<div className="absolute inset-0 bg-gradient-to-r from-rose-500/[0.03] via-transparent to-rose-500/[0.03]" />
@@ -66,10 +88,109 @@ export function Footer() {
 						transition={{ duration: 0.5, delay: 0.2 }}
 					>
 						<h3 className="font-bold text-lg text-foreground/90">Community</h3>
-						<p className="text-sm text-muted-foreground flex flex-wrap items-center gap-1.5 leading-relaxed">
-							Made with <Heart className="h-3.5 w-3.5 text-rose-500 flex-shrink-0 animate-pulse" /> by Homarr Labs and the open source
-							community.
-						</p>
+						<div className="text-sm text-muted-foreground flex flex-wrap items-center gap-1.5 leading-relaxed">
+							Made with{" "}
+							<div className="relative inline-block">
+								<motion.div
+									className="cursor-pointer"
+									onMouseEnter={() => setIsHeartHovered(true)}
+									onMouseLeave={() => setIsHeartHovered(false)}
+									onClick={handleHeartClick}
+									whileTap={{ scale: 0.85 }}
+								>
+									<motion.div
+										animate={{
+											scale: isHeartFilled ? [1, 1.3, 1] : 1,
+										}}
+										transition={{
+											duration: isHeartFilled ? 0.4 : 0,
+											ease: "easeInOut",
+										}}
+									>
+										<Heart
+											className="h-3.5 w-3.5 text-rose-500 flex-shrink-0 hover:scale-125 transition-all duration-200"
+											fill={isHeartFilled ? "#f43f5e" : "none"}
+											strokeWidth={isHeartFilled ? 1.5 : 2}
+										/>
+									</motion.div>
+								</motion.div>
+
+								{/* Easter egg mini hearts */}
+								{isHeartHovered && (
+									<>
+										{HOVER_HEART_IDS.map((id, i) => (
+											<motion.div
+												key={id}
+												initial={{ scale: 0, opacity: 0 }}
+												animate={{
+													scale: [0, 1, 0.8],
+													opacity: [0, 1, 0],
+													x: [0, (i % 2 === 0 ? 1 : -1) * Math.random() * 20],
+													y: [0, -Math.random() * 30],
+												}}
+												transition={{
+													duration: 0.8 + Math.random() * 0.5,
+													ease: "easeOut",
+													delay: Math.random() * 0.2,
+												}}
+												className="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 pointer-events-none"
+											>
+												<Heart className={`h-2 w-2 ${i < 3 ? "text-rose-300" : i < 6 ? "text-rose-400" : "text-rose-500"}`} />
+											</motion.div>
+										))}
+
+										{/* Subtle particle glow */}
+										<motion.div
+											initial={{ scale: 0, opacity: 0 }}
+											animate={{
+												scale: [0, 3],
+												opacity: [0, 0.3, 0],
+											}}
+											transition={{ duration: 0.6, ease: "easeOut" }}
+											className="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 w-3 h-3 rounded-full bg-rose-500/20 pointer-events-none"
+										/>
+									</>
+								)}
+
+								{/* Heart fill animation extras */}
+								{isHeartFilled && (
+									<>
+										{/* Radiating circles on heart fill */}
+										<motion.div
+											initial={{ scale: 0.5, opacity: 0 }}
+											animate={{
+												scale: [0.5, 2.5],
+												opacity: [0.5, 0],
+											}}
+											transition={{ duration: 0.6, ease: "easeOut" }}
+											className="absolute left-1/2 top-1/2 w-3 h-3 rounded-full bg-rose-500/30 -translate-x-1/2 -translate-y-1/2 pointer-events-none"
+										/>
+
+										{/* Extra burst of mini hearts when filled */}
+										{BURST_HEART_IDS.map((id, i) => (
+											<motion.div
+												key={id}
+												initial={{ scale: 0, opacity: 0 }}
+												animate={{
+													scale: [0, 1, 0.8],
+													opacity: [0, 1, 0],
+													x: [0, Math.cos((i * Math.PI) / 2.5) * 25],
+													y: [0, Math.sin((i * Math.PI) / 2.5) * 25],
+												}}
+												transition={{
+													duration: 0.6,
+													ease: "easeOut",
+												}}
+												className="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 pointer-events-none"
+											>
+												<Heart className="h-2 w-2 text-rose-500" fill="#f43f5e" />
+											</motion.div>
+										))}
+									</>
+								)}
+							</div>{" "}
+							by Homarr Labs and the open source community.
+						</div>
 						<Link
 							href="https://github.com/homarr-labs"
 							target="_blank"
--- a/web/src/components/header-wrapper.tsx
+++ b/web/src/components/header-wrapper.tsx
@@ -1,5 +1,5 @@
-import { ClientHeader } from "./client-header"
+import { Header } from "./header"

 export function HeaderWrapper() {
-	return <ClientHeader />
+	return <Header />
 }
--- a/web/src/components/header.tsx
+++ b/web/src/components/header.tsx
@@ -3,8 +3,8 @@
 import { IconSubmissionForm } from "@/components/icon-submission-form"
 import { ThemeSwitcher } from "@/components/theme-switcher"
 import { REPO_PATH } from "@/constants"
-import { getAllIcons } from "@/lib/api"
-import type { Icon } from "@/types/icons"
+import { getIconsArray } from "@/lib/api"
+import type { IconWithName } from "@/types/icons"
 import { motion } from "framer-motion"
 import { Github, Menu, Search } from "lucide-react"
 import Link from "next/link"
@@ -16,14 +16,15 @@ import { Sheet, SheetContent, SheetTrigger } from "./ui/sheet"
 import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "./ui/tooltip"

 export function Header() {
-	const [icons, setIcons] = useState<Record<string, Icon>>({})
+	const [iconsData, setIconsData] = useState<IconWithName[]>([])
 	const [isLoaded, setIsLoaded] = useState(false)
+	const [commandMenuOpen, setCommandMenuOpen] = useState(false)

 	useEffect(() => {
 		async function loadIcons() {
 			try {
-				const iconsData = await getAllIcons()
-				setIcons(iconsData)
+				const icons = await getIconsArray()
+				setIconsData(icons)
 				setIsLoaded(true)
 			} catch (error) {
 				console.error("Failed to load icons:", error)
@@ -34,6 +35,11 @@ export function Header() {
 		loadIcons()
 	}, [])

+	// Function to open the command menu
+	const openCommandMenu = () => {
+		setCommandMenuOpen(true)
+	}
+
 	return (
 		<motion.header
 			className="border-b sticky top-0 z-50 bg-background/95 backdrop-blur-md border-border/50"
@@ -43,9 +49,8 @@ export function Header() {
 		>
 			<div className="px-4 md:px-12 flex items-center justify-between h-16 md:h-18">
 				<div className="flex items-center gap-2 md:gap-6">
-					<Link href="/" className="text-lg md:text-xl font-bold group relative">
-						<span className="relative z-10 inline-block transition-colors duration-300 group-hover:text-rose-500">Dashboard Icons</span>
-						<span className="absolute bottom-0 left-0 w-0 h-0.5 bg-rose-500 group-hover:w-full transition-all duration-300 ease-in-out rounded-full" />
+					<Link href="/" className="text-lg md:text-xl font-bold group">
+						<span className="transition-colors duration-300 group-hover:text-rose-500">Dashboard Icons</span>
 					</Link>
 					<div className="hidden md:block">
 						<HeaderNav />
@@ -54,27 +59,18 @@ export function Header() {
 				<div className="flex items-center gap-2 md:gap-4">
 					{/* Desktop search button */}
 					<div className="hidden md:block">
-						<TooltipProvider>
-							<Tooltip>
-								<TooltipTrigger asChild>
-									<Button
-										variant="outline"
-										size="sm"
-										className="gap-2 cursor-pointer hover:bg-rose-500/10 dark:hover:bg-rose-900/30 hover:border-rose-500 dark:hover:border-rose-500 transition-colors duration-200 shadow-sm"
-										id="desktop-search-button"
-									>
-										<Search className="h-4 w-4" />
-										<span>Search</span>
-										<kbd className="pointer-events-none inline-flex h-5 select-none items-center gap-1 rounded border border-border/80 bg-muted/80 px-1.5 font-mono text-[10px] font-medium opacity-100">
-											<span className="text-xs">⌘</span>K
-										</kbd>
-									</Button>
-								</TooltipTrigger>
-								<TooltipContent>
-									<p>Search icons</p>
-								</TooltipContent>
-							</Tooltip>
-						</TooltipProvider>
+						<Button
+							variant="outline"
+							size="sm"
+							className="gap-2 cursor-pointer hover:bg-rose-500/10 dark:hover:bg-rose-900/30 hover:border-rose-500 dark:hover:border-rose-500 transition-all duration-300"
+							onClick={openCommandMenu}
+						>
+							<Search className="h-4 w-4 transition-all duration-300" />
+							<span>Find icons</span>
+							<kbd className="pointer-events-none inline-flex h-5 select-none items-center gap-1 rounded border border-border/80 bg-muted/80 px-1.5 font-mono text-[10px] font-medium opacity-100">
+								<span className="text-xs">⌘</span>K
+							</kbd>
+						</Button>
 					</div>

 					{/* Mobile search button */}
@@ -82,16 +78,15 @@ export function Header() {
 						<Button
 							variant="ghost"
 							size="icon"
-							className="rounded-lg cursor-pointer hover:bg-rose-500/10 dark:hover:bg-rose-900/30 transition-colors duration-200 focus:ring-2 focus:ring-rose-500/20"
-							id="mobile-search-button"
+							className="rounded-lg cursor-pointer hover:bg-rose-500/10 dark:hover:bg-rose-900/30 transition-all duration-300 focus:ring-2 focus:ring-rose-500/20"
+							onClick={openCommandMenu}
 						>
-							<Search className="h-5 w-5" />
-							<span className="sr-only">Search icons</span>
+							<Search className="h-5 w-5 transition-all duration-300" />
+							<span className="sr-only">Find icons</span>
 						</Button>
 					</div>

 					<div className="hidden md:flex items-center gap-2 md:gap-4">
-						{isLoaded && <CommandMenu icons={Object.keys(icons)} triggerButtonId="desktop-search-button" />}
 						<IconSubmissionForm />
 						<TooltipProvider>
 							<Tooltip>
@@ -99,17 +94,17 @@ export function Header() {
 									<Button
 										variant="ghost"
 										size="icon"
-										className="rounded-lg cursor-pointer hover:bg-rose-500/10 dark:hover:bg-rose-900/30 transition-colors duration-200 focus:ring-2 focus:ring-rose-500/20"
+										className="rounded-lg cursor-pointer hover:bg-rose-500/10 dark:hover:bg-rose-900/30 transition-all duration-300 focus:ring-2 focus:ring-rose-500/20"
 										asChild
 									>
 										<Link href={REPO_PATH} target="_blank" className="group">
-											<Github className="h-5 w-5 group-hover:text-rose-500 transition-colors duration-200" />
-											<span className="sr-only">GitHub</span>
+											<Github className="h-5 w-5 group-hover:text-rose-500 transition-all duration-300" />
+											<span className="sr-only">View on GitHub</span>
 										</Link>
 									</Button>
 								</TooltipTrigger>
 								<TooltipContent>
-									<p>GitHub</p>
+									<p>View on GitHub</p>
 								</TooltipContent>
 							</Tooltip>
 						</TooltipProvider>
@@ -123,9 +118,9 @@ export function Header() {
 								<Button
 									variant="ghost"
 									size="icon"
-									className="h-10 w-10 rounded-full cursor-pointer hover:bg-rose-500/10 dark:hover:bg-rose-900/30 transition-colors duration-200 focus:ring-2 focus:ring-rose-500/20"
+									className="h-10 w-10 rounded-full cursor-pointer hover:bg-rose-500/10 dark:hover:bg-rose-900/30 transition-all duration-300 focus:ring-2 focus:ring-rose-500/20"
 								>
-									<Menu className="h-5 w-5" />
+									<Menu className="h-5 w-5 transition-all duration-300" />
 									<span className="sr-only">Toggle menu</span>
 								</Button>
 							</SheetTrigger>
@@ -139,14 +134,22 @@ export function Header() {
 										<nav className="space-y-6">
 											<HeaderNav />
 											<div className="border-t pt-6" />
-											{isLoaded && <CommandMenu icons={Object.keys(icons)} triggerButtonId="mobile-search-button" />}
+											<Button
+												variant="outline"
+												size="sm"
+												className="text-sm h-8 rounded-md cursor-pointer flex items-center gap-2 bg-background border-border hover:bg-rose-500/10 hover:text-rose-500 w-full justify-start transition-all duration-300"
+												onClick={openCommandMenu}
+											>
+												<Search className="h-3.5 w-3.5 transition-all duration-300" />
+												<span>Find and filter icons</span>
+											</Button>
 											<IconSubmissionForm />
 											<Link
 												href={REPO_PATH}
 												target="_blank"
-												className="flex items-center gap-2 text-sm font-medium text-rose-500 hover:text-rose-600 transition-colors cursor-pointer p-2 hover:bg-rose-500/5 rounded-md"
+												className="flex items-center gap-2 text-sm font-medium text-rose-500 hover:text-rose-600 transition-all duration-300 cursor-pointer p-2 hover:bg-rose-500/5 rounded-md"
 											>
-												<Github className="h-4 w-4" />
+												<Github className="h-4 w-4 transition-all duration-300" />
 												GitHub Repository
 											</Link>
 										</nav>
@@ -157,6 +160,9 @@ export function Header() {
 					</div>
 				</div>
 			</div>
+
+			{/* Single instance of CommandMenu */}
+			{isLoaded && <CommandMenu icons={iconsData} open={commandMenuOpen} onOpenChange={setCommandMenuOpen} />}
 		</motion.header>
 	)
 }
--- a/web/src/components/hero.tsx
+++ b/web/src/components/hero.tsx
@@ -7,7 +7,7 @@ import { cn } from "@/lib/utils"
 import { motion, useAnimation, useInView } from "framer-motion"
 import { Circle, Github, Heart, Search, Sparkles } from "lucide-react"
 import Link from "next/link"
-import { useEffect, useState, useRef } from "react"
+import { useEffect, useRef, useState } from "react"

 interface IconCardProps {
 	name: string
@@ -72,7 +72,7 @@ function ElegantShape({
 					delay,
 					ease: [0.23, 0.86, 0.39, 0.96],
 					opacity: { duration: 1.2 },
-				}
+				},
 			})
 		}
 	}, [controls, delay, isInView, rotate])
@@ -302,7 +302,7 @@ export function HeroSection({ totalIcons }: { totalIcons: number }) {
 							<Input
 								name="q"
 								type="search"
-								placeholder={`Search ${totalIcons} icons...`}
+								placeholder={`Find any of ${totalIcons} icons by name or category...`}
 								className="pl-10 h-10 md:h-12 rounded-lg border-muted-foreground/20 focus:border-rose-500 focus:ring-rose-500/20 transition-all bg-background/95 dark:bg-background/90 backdrop-blur-sm text-sm md:text-base"
 								value={searchQuery}
 								onChange={(e) => setSearchQuery(e.target.value)}
@@ -318,7 +318,7 @@ export function HeroSection({ totalIcons }: { totalIcons: number }) {
 						<div className="flex gap-3 md:gap-4 flex-wrap justify-center">
 							<Button variant="default" className="h-9 md:h-10 px-4 gap-2 bg-rose-500 hover:bg-rose-600 text-white" asChild>
 								<Link href="/icons" className="flex items-center text-sm md:text-base">
-									Browse all icons
+									Explore all icons
 								</Link>
 							</Button>
 							<Button
--- a/web/src/components/icon-details.tsx
+++ b/web/src/components/icon-details.tsx
@@ -6,14 +6,15 @@ import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/com
 import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip"
 import { BASE_URL, REPO_PATH } from "@/constants"
 import type { AuthorData, Icon } from "@/types/icons"
+import confetti from "canvas-confetti"
 import { motion } from "framer-motion"
 import { Check, Copy, Download, FileType, Github, Moon, PaletteIcon, Sun } from "lucide-react"
+import { useTheme } from "next-themes"
 import Image from "next/image"
 import Link from "next/link"
-import { useState } from "react"
+import { useCallback, useState } from "react"
 import { toast } from "sonner"
 import { Carbon } from "./carbon"
-import { useTheme } from "next-themes"

 export type IconDetailsProps = {
 	icon: string
@@ -44,24 +45,52 @@ export function IconDetails({ icon, iconData, authorData }: IconDetailsProps) {
 	const availableFormats = getAvailableFormats()
 	const [copiedVariants, setCopiedVariants] = useState<Record<string, boolean>>({})

+	// Launch confetti from the pointer position
+	const launchConfetti = useCallback((originX?: number, originY?: number) => {
+		const defaults = {
+			startVelocity: 30,
+			spread: 360,
+			ticks: 50,
+			zIndex: 0,
+			disableForReducedMotion: true,
+			colors: ["#ff0a54", "#ff477e", "#ff7096", "#ff85a1", "#fbb1bd", "#f9bec7"],
+		}
+
+		// If we have origin coordinates, use them
+		if (originX !== undefined && originY !== undefined) {
+			confetti({
+				...defaults,
+				particleCount: 100,
+				origin: { x: originX / window.innerWidth, y: originY / window.innerHeight },
+			})
+		} else {
+			// Default to center of screen
+			confetti({
+				...defaults,
+				particleCount: 100,
+				origin: { x: 0.5, y: 0.5 },
+			})
+		}
+	}, [])
+
 	// Helper function to get the appropriate icon variant based on theme
 	const getIconVariant = (iconName: string) => {
 		// Check if the icon has theme variants
 		if (iconColorVariants) {
 			// If in dark mode and a light variant exists, use the light variant
-			if (resolvedTheme === 'dark' && iconColorVariants.light) {
-				return iconColorVariants.light;
+			if (resolvedTheme === "dark" && iconColorVariants.light) {
+				return iconColorVariants.light
 			}
 			// If in light mode and a dark variant exists, use the dark variant
-			else if (resolvedTheme === 'light' && iconColorVariants.dark) {
-				return iconColorVariants.dark;
+			if (resolvedTheme === "light" && iconColorVariants.dark) {
+				return iconColorVariants.dark
 			}
 		}
 		// Fall back to the default name if no appropriate variant
-		return iconName;
+		return iconName
 	}

-	const handleCopy = (url: string, variantKey: string) => {
+	const handleCopy = (url: string, variantKey: string, event?: React.MouseEvent) => {
 		navigator.clipboard.writeText(url)
 		setCopiedVariants((prev) => ({
 			...prev,
@@ -74,11 +103,57 @@ export function IconDetails({ icon, iconData, authorData }: IconDetailsProps) {
 			}))
 		}, 2000)

+		// Launch confetti from click position or center of screen
+		if (event) {
+			launchConfetti(event.clientX, event.clientY)
+		} else {
+			launchConfetti()
+		}
+
 		toast.success("URL copied", {
-			description: "The icon URL has been copied to your clipboard",
+			description: "The icon URL has been copied to your clipboard. Ready to use!",
 		})
 	}

+	const handleDownload = async (event: React.MouseEvent, url: string, filename: string) => {
+		event.preventDefault()
+
+		// Launch confetti from download button position
+		launchConfetti(event.clientX, event.clientY)
+
+		try {
+			// Show loading toast
+			toast.loading("Preparing download...")
+
+			// Fetch the file first as a blob
+			const response = await fetch(url)
+			const blob = await response.blob()
+
+			// Create a blob URL and use it for download
+			const blobUrl = URL.createObjectURL(blob)
+			const link = document.createElement("a")
+			link.href = blobUrl
+			link.download = filename
+			document.body.appendChild(link)
+			link.click()
+
+			// Clean up
+			document.body.removeChild(link)
+			setTimeout(() => URL.revokeObjectURL(blobUrl), 100)
+
+			toast.dismiss()
+			toast.success("Download started", {
+				description: "Your icon file is being downloaded and will be saved to your device.",
+			})
+		} catch (error) {
+			console.error("Download error:", error)
+			toast.dismiss()
+			toast.error("Download failed", {
+				description: "There was an error downloading the file. Please try again.",
+			})
+		}
+	}
+
 	const renderVariant = (format: string, iconName: string, theme?: "light" | "dark") => {
 		const variantName = theme && iconColorVariants?.[theme] ? iconColorVariants[theme] : iconName
 		const url = `${BASE_URL}/${format}/${variantName}.${format}`
@@ -95,7 +170,7 @@ export function IconDetails({ icon, iconData, authorData }: IconDetailsProps) {
 								className="relative w-28 h-28 mb-3 cursor-pointer rounded-xl overflow-hidden group"
 								whileHover={{ scale: 1.05 }}
 								whileTap={{ scale: 0.95 }}
-								onClick={() => handleCopy(url, variantKey)}
+								onClick={(e) => handleCopy(url, variantKey, e)}
 							>
 								<div className="absolute inset-0 border-2 border-transparent group-hover:border-primary/20 rounded-xl z-10 transition-colors" />

@@ -123,7 +198,7 @@ export function IconDetails({ icon, iconData, authorData }: IconDetailsProps) {
 							</motion.div>
 						</TooltipTrigger>
 						<TooltipContent>
-							<p>Click to copy URL to clipboard</p>
+							<p>Click to copy direct URL to clipboard</p>
 						</TooltipContent>
 					</Tooltip>

@@ -132,14 +207,17 @@ export function IconDetails({ icon, iconData, authorData }: IconDetailsProps) {
 					<div className="flex gap-2 mt-3 w-full justify-center">
 						<Tooltip>
 							<TooltipTrigger asChild>
-								<Button variant="outline" size="icon" className="h-8 w-8 rounded-lg" asChild>
-									<a href={url} download={`${iconName}.${format}`}>
-										<Download className="w-4 h-4" />
-									</a>
+								<Button
+									variant="outline"
+									size="icon"
+									className="h-8 w-8 rounded-lg cursor-pointer"
+									onClick={(e) => handleDownload(e, url, `${iconName}.${format}`)}
+								>
+									<Download className="w-4 h-4" />
 								</Button>
 							</TooltipTrigger>
 							<TooltipContent>
-								<p>Download icon</p>
+								<p>Download icon file</p>
 							</TooltipContent>
 						</Tooltip>

@@ -149,13 +227,13 @@ export function IconDetails({ icon, iconData, authorData }: IconDetailsProps) {
 									variant="outline"
 									size="icon"
 									className="h-8 w-8 rounded-lg cursor-pointer"
-									onClick={() => handleCopy(url, `btn-${variantKey}`)}
+									onClick={(e) => handleCopy(url, `btn-${variantKey}`, e)}
 								>
 									{copiedVariants[`btn-${variantKey}`] ? <Check className="w-4 h-4 text-green-500" /> : <Copy className="w-4 h-4" />}
 								</Button>
 							</TooltipTrigger>
 							<TooltipContent>
-								<p>Copy URL to clipboard</p>
+								<p>Copy direct URL to clipboard</p>
 							</TooltipContent>
 						</Tooltip>

@@ -235,9 +313,16 @@ export function IconDetails({ icon, iconData, authorData }: IconDetailsProps) {
 										<h3 className="text-sm font-semibold text-muted-foreground">Categories</h3>
 										<div className="flex flex-wrap gap-2">
 											{iconData.categories.map((category) => (
-												<span key={category} className="inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold">
-													{category}
-												</span>
+												<Link
+													key={category}
+													href={`/icons?category=${encodeURIComponent(category)}`}
+													className="inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold hover:bg-rose-500/10 hover:border-rose-500/30 transition-colors cursor-pointer"
+												>
+													{category
+														.split("-")
+														.map((word) => word.charAt(0).toUpperCase() + word.slice(1))
+														.join(" ")}
+												</Link>
 											))}
 										</div>
 									</div>
@@ -246,13 +331,18 @@ export function IconDetails({ icon, iconData, authorData }: IconDetailsProps) {
 								{iconData.aliases && iconData.aliases.length > 0 && (
 									<div className="space-y-3">
 										<h3 className="text-sm font-semibold text-muted-foreground">Aliases</h3>
-										<div className="flex flex-wrap gap-1">
+										<div className="flex flex-wrap gap-2">
 											{iconData.aliases.map((alias) => (
-												<span key={alias} className="inline-flex items-center rounded-full bg-muted px-2.5 py-0.5 text-xs">
+												<span
+													key={alias}
+													className="inline-flex items-center rounded-full bg-rose-50 dark:bg-rose-950/20 border border-rose-100 dark:border-rose-900/30 px-2.5 py-1 text-xs text-rose-700 dark:text-rose-300"
+													title={`This icon can also be found by searching for "${alias}"`}
+												>
 													{alias}
 												</span>
 											))}
 										</div>
+										<p className="text-[10px] text-muted-foreground mt-1">These aliases can be used to find this icon in search results.</p>
 									</div>
 								)}
 							</div>
@@ -350,11 +440,7 @@ export function IconDetails({ icon, iconData, authorData }: IconDetailsProps) {
 								<div className="space-y-3">
 									<h3 className="text-sm font-semibold text-muted-foreground">Source</h3>
 									<Button variant="outline" className="w-full" asChild>
-										<Link
-											href={`${REPO_PATH}/blob/main/meta/${icon}.json`}
-											target="_blank"
-											rel="noopener noreferrer"
-										>
+										<Link href={`${REPO_PATH}/blob/main/meta/${icon}.json`} target="_blank" rel="noopener noreferrer">
 											<Github className="w-4 h-4 mr-2" />
 											View on GitHub
 										</Link>
--- a/web/src/components/icon-submission-form.tsx
+++ b/web/src/components/icon-submission-form.tsx
@@ -2,7 +2,6 @@

 import { Button } from "@/components/ui/button"
 import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogTrigger } from "@/components/ui/dialog"
-import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip"
 import { REPO_PATH } from "@/constants"
 import { DialogDescription } from "@radix-ui/react-dialog"
 import { ExternalLink, PlusCircle } from "lucide-react"
@@ -13,31 +12,31 @@ export const ISSUE_TEMPLATES = [
 	{
 		id: "add_monochrome_icon",
 		name: "Add light & dark icon",
-		description: "Use this template to add a new icon to the project. Monochrome icons need both light and dark versions.",
+		description: "Submit a new icon with both light and dark versions for optimal theme compatibility.",
 		url: `${REPO_PATH}/issues/new?template=add_monochrome_icon.yml`,
 	},
 	{
 		id: "add_normal_icon",
 		name: "Add normal icon",
-		description: "Use this template to add a new icon to the project. Normal icons work for both light and dark themes.",
+		description: "Submit a new icon that works well across both light and dark themes.",
 		url: `${REPO_PATH}/issues/new?template=add_normal_icon.yml`,
 	},
 	{
 		id: "update_monochrome_icon",
 		name: "Update light & dark icon",
-		description: "Use this template to update an existing icon. Monochrome icons need both light and dark versions.",
+		description: "Improve an existing icon by updating both light and dark versions.",
 		url: `${REPO_PATH}/issues/new?template=update_monochrome_icon.yml`,
 	},
 	{
 		id: "update_normal_icon",
 		name: "Update normal icon",
-		description: "Use this template to update an existing icon. Normal icons work for both light and dark themes.",
+		description: "Improve an existing icon that works across both light and dark themes.",
 		url: `${REPO_PATH}/issues/new?template=update_normal_icon.yml`,
 	},
 	{
 		id: "blank_issue",
 		name: "Something else",
-		description: "You'd like to do something else? Use this template to create a new issue.",
+		description: "Create a custom issue for other suggestions, bug reports, or improvements.",
 		url: `${REPO_PATH}/issues/new?template=BLANK_ISSUE`,
 	},
 ]
@@ -46,15 +45,15 @@ export function IconSubmissionContent({ onClose }: { onClose?: () => void }) {
 		<div className="flex flex-col gap-4">
 			<div className="flex flex-col gap-2">
 				{ISSUE_TEMPLATES.map((template) => (
-					<Link key={template.id} href={template.url} className="w-full" target="_blank" rel="noopener noreferrer">
+					<Link key={template.id} href={template.url} className="w-full group" target="_blank" rel="noopener noreferrer">
 						<Button
 							key={template.id}
 							variant="outline"
-							className="w-full flex flex-col items-start gap-1 h-auto p-4 text-left cursor-pointer hover:bg-rose-500/10 dark:hover:bg-rose-900/30 hover:border-rose-500 dark:hover:border-rose-500 transition-colors duration-200"
+							className="w-full flex flex-col items-start gap-1 h-auto p-4 text-left cursor-pointer hover:bg-rose-500/10 dark:hover:bg-rose-900/30 hover:border-rose-500 dark:hover:border-rose-500 transition-all duration-300"
 						>
 							<div className="flex w-full items-center justify-between">
-								<span className="font-medium">{template.name}</span>
-								<ExternalLink className="h-4 w-4 text-muted-foreground" />
+								<span className="font-medium group-hover:text-rose-500 transition-all duration-300">{template.name}</span>
+								<ExternalLink className="h-4 w-4 text-muted-foreground group-hover:text-rose-500 transition-all duration-300" />
 							</div>
 							<span className="text-xs text-muted-foreground">{template.description}</span>
 						</Button>
@@ -69,27 +68,18 @@ export function IconSubmissionForm() {

 	return (
 		<Dialog open={open} onOpenChange={setOpen}>
-			<TooltipProvider>
-				<Tooltip>
-					<TooltipTrigger asChild>
-						<DialogTrigger asChild>
-							<Button
-								variant="outline"
-								className="hidden md:inline-flex cursor-pointer hover:bg-rose-500/10 dark:hover:bg-rose-900/30 hover:border-rose-500 dark:hover:border-rose-500 transition-all duration-300"
-							>
-								<PlusCircle className="h-4 w-4 transition-all duration-300" /> Suggest new icon
-							</Button>
-						</DialogTrigger>
-					</TooltipTrigger>
-					<TooltipContent>
-						<p>Suggest a new icon</p>
-					</TooltipContent>
-				</Tooltip>
-			</TooltipProvider>
+			<DialogTrigger asChild>
+				<Button
+					variant="outline"
+					className="hidden md:inline-flex cursor-pointer hover:bg-rose-500/10 dark:hover:bg-rose-900/30 hover:border-rose-500 dark:hover:border-rose-500 transition-all duration-300"
+				>
+					<PlusCircle className="h-4 w-4 transition-all duration-300" /> Contribute new icon
+				</Button>
+			</DialogTrigger>
 			<DialogContent className="md:max-w-4xl backdrop-blur-2xl">
 				<DialogHeader>
-					<DialogTitle>Suggest a new icon</DialogTitle>
-					<DialogDescription>You can suggest a new icon by creating an issue on GitHub using one of the templates below.</DialogDescription>
+					<DialogTitle>Contribute a new icon</DialogTitle>
+					<DialogDescription>Choose a template below to suggest a new icon or improve an existing one.</DialogDescription>
 				</DialogHeader>
 				<div className="mt-4">
 					<IconSubmissionContent onClose={() => setOpen(false)} />
--- a/web/src/components/license-notice.tsx
+++ b/web/src/components/license-notice.tsx
@@ -42,7 +42,7 @@ export function LicenseNotice() {
 								identification purposes only and do not imply endorsement.
 							</p>
 							<p>
-								Read the{" "}
+								View our{" "}
 								<Link
 									href={`${REPO_PATH}/blob/main/LICENSE`}
 									className="underline hover:text-foreground"
--- a/web/src/components/recently-added-icons.tsx
+++ b/web/src/components/recently-added-icons.tsx
@@ -1,13 +1,13 @@
 "use client"

 import { BASE_URL } from "@/constants"
-import type { IconWithName } from "@/types/icons"
+import type { Icon, IconWithName } from "@/types/icons"
 import { format, isToday, isYesterday } from "date-fns"
 import { motion, useInView } from "framer-motion"
 import { ArrowRight, Clock, ExternalLink } from "lucide-react"
+import { useTheme } from "next-themes"
 import Image from "next/image"
 import Link from "next/link"
-import { useTheme } from "next-themes"
 import { useRef } from "react"

 function formatIconDate(timestamp: string): string {
@@ -25,20 +25,20 @@ export function RecentlyAddedIcons({ icons }: { icons: IconWithName[] }) {
 	const { resolvedTheme } = useTheme()

 	// Helper function to get the appropriate icon variant based on theme
-	const getIconVariant = (name: string, data: any) => {
+	const getIconVariant = (name: string, data: Icon) => {
 		// Check if the icon has theme variants and use appropriate one
 		if (data.colors) {
 			// If in dark mode and a light variant exists, use the light variant
-			if (resolvedTheme === 'dark' && data.colors.light) {
-				return data.colors.light;
+			if (resolvedTheme === "dark" && data.colors.light) {
+				return data.colors.light
 			}
 			// If in light mode and a dark variant exists, use the dark variant
-			else if (resolvedTheme === 'light' && data.colors.dark) {
-				return data.colors.dark;
+			if (resolvedTheme === "light" && data.colors.dark) {
+				return data.colors.dark
 			}
 		}
 		// Fall back to the default name if no appropriate variant
-		return name;
+		return name
 	}

 	return (
@@ -74,18 +74,18 @@ export function RecentlyAddedIcons({ icons }: { icons: IconWithName[] }) {
 					))}
 				</div>

-						<motion.div
+				<motion.div
 					className="mt-12 text-center"
 					initial={{ opacity: 0 }}
 					whileInView={{ opacity: 1 }}
-							viewport={{ once: true }}
+					viewport={{ once: true }}
 					transition={{ duration: 0.8, delay: 0.4 }}
 				>
 					<Link
 						href="/icons"
 						className="text-rose-500 dark:text-rose-400 hover:text-rose-600 dark:hover:text-rose-300 font-medium inline-flex items-center py-2 px-4 rounded-full border border-rose-200 dark:border-rose-800/30 hover:bg-rose-50 dark:hover:bg-rose-900/20 transition-all duration-200 group hover-lift soft-shadow"
 					>
-						View all icons
+						View complete collection
 						<ArrowRight className="w-4 h-4 ml-1.5 transition-transform duration-200 group-hover:translate-x-1" />
 					</Link>
 				</motion.div>
@@ -95,17 +95,21 @@ export function RecentlyAddedIcons({ icons }: { icons: IconWithName[] }) {
 }

 // Extracted component for better animation handling
-function RecentIconCard({ name, data, getIconVariant }: {
-	name: string;
-	data: any;
-	getIconVariant: (name: string, data: any) => string;
+function RecentIconCard({
+	name,
+	data,
+	getIconVariant,
+}: {
+	name: string
+	data: Icon
+	getIconVariant: (name: string, data: Icon) => string
 }) {
-	const ref = useRef(null);
+	const ref = useRef(null)
 	const isInView = useInView(ref, {
 		once: false,
 		amount: 0.2,
-		margin: "100px 0px"
-	});
+		margin: "100px 0px",
+	})

 	const variants = {
 		hidden: { opacity: 0, y: 20, scale: 0.95 },
@@ -113,15 +117,15 @@ function RecentIconCard({ name, data, getIconVariant }: {
 			opacity: 1,
 			y: 0,
 			scale: 1,
-			transition: { duration: 0.4, ease: [0.25, 0.1, 0.25, 1.0] }
+			transition: { duration: 0.4, ease: [0.25, 0.1, 0.25, 1.0] },
 		},
 		exit: {
 			opacity: 0,
 			y: -10,
 			scale: 0.98,
-			transition: { duration: 0.3, ease: [0.25, 0.1, 0.25, 1.0] }
-		}
-	};
+			transition: { duration: 0.3, ease: [0.25, 0.1, 0.25, 1.0] },
+		},
+	}

 	return (
 		<motion.div
@@ -162,5 +166,5 @@ function RecentIconCard({ name, data, getIconVariant }: {
 				</div>
 			</Link>
 		</motion.div>
-	);
+	)
 }
--- a/web/src/hooks/use-media-query.ts
+++ b/web/src/hooks/use-media-query.ts
@@ -0,0 +1,25 @@
+"use client"
+
+import { useEffect, useState } from "react"
+
+export function useMediaQuery(query: string): boolean {
+	const [matches, setMatches] = useState(false)
+
+	useEffect(() => {
+		const media = window.matchMedia(query)
+
+		// Initial check
+		if (media.matches !== matches) {
+			setMatches(media.matches)
+		}
+
+		// Setup listener for changes
+		const listener = () => setMatches(media.matches)
+		media.addEventListener("change", listener)
+
+		// Cleanup
+		return () => media.removeEventListener("change", listener)
+	}, [query, matches])
+
+	return matches
+}
--- a/web/src/lib/api.ts
+++ b/web/src/lib/api.ts
@@ -1,50 +1,94 @@
 import { METADATA_URL } from "@/constants"
 import type { IconFile, IconWithName } from "@/types/icons"
+
+/**
+ * Custom error class for API errors
+ */
+export class ApiError extends Error {
+	status: number
+
+	constructor(message: string, status = 500) {
+		super(message)
+		this.name = "ApiError"
+		this.status = status
+	}
+}
+
 /**
 * Fetches all icon data from the metadata.json file
 */
-
 export async function getAllIcons(): Promise<IconFile> {
-	const file = await fetch(METADATA_URL)
-	return (await file.json()) as IconFile
+	try {
+		const response = await fetch(METADATA_URL)
+
+		if (!response.ok) {
+			throw new ApiError(`Failed to fetch icons: ${response.statusText}`, response.status)
+		}
+
+		return (await response.json()) as IconFile
+	} catch (error) {
+		if (error instanceof ApiError) {
+			throw error
+		}
+		console.error("Error fetching icons:", error)
+		throw new ApiError("Failed to fetch icons data. Please try again later.")
+	}
 }

 /**
 * Gets a list of all icon names.
 */
 export const getIconNames = async (): Promise<string[]> => {
-	const iconsData = await getAllIcons()
-	return Object.keys(iconsData)
+	try {
+		const iconsData = await getAllIcons()
+		return Object.keys(iconsData)
+	} catch (error) {
+		console.error("Error getting icon names:", error)
+		throw error
+	}
 }

 /**
 * Converts icon data to an array format for easier rendering
 */
 export async function getIconsArray(): Promise<IconWithName[]> {
-	const iconsData = await getAllIcons()
+	try {
+		const iconsData = await getAllIcons()

-	return Object.entries(iconsData)
-		.map(([name, data]) => ({
-			name,
-			data,
-		}))
-		.sort((a, b) => a.name.localeCompare(b.name))
+		return Object.entries(iconsData)
+			.map(([name, data]) => ({
+				name,
+				data,
+			}))
+			.sort((a, b) => a.name.localeCompare(b.name))
+	} catch (error) {
+		console.error("Error getting icons array:", error)
+		throw error
+	}
 }

 /**
 * Fetches data for a specific icon
 */
 export async function getIconData(iconName: string): Promise<IconWithName | null> {
-	const iconsData = await getAllIcons()
-	const iconData = iconsData[iconName]
+	try {
+		const iconsData = await getAllIcons()
+		const iconData = iconsData[iconName]

-	if (!iconData) {
-		return null
-	}
+		if (!iconData) {
+			throw new ApiError(`Icon '${iconName}' not found`, 404)
+		}

-	return {
-		name: iconName,
-		data: iconData,
+		return {
+			name: iconName,
+			data: iconData,
+		}
+	} catch (error) {
+		if (error instanceof ApiError && error.status === 404) {
+			return null
+		}
+		console.error("Error getting icon data:", error)
+		throw error
 	}
 }

@@ -52,24 +96,57 @@ export async function getIconData(iconName: string): Promise<IconWithName | null
 * Fetches author data from GitHub API
 */
 export async function getAuthorData(authorId: number) {
-	const response = await fetch(`https://api.github.com/user/${authorId}`, {
-		headers: {
-			Authorization: `Bearer ${process.env.GITHUB_TOKEN}`,
-			"Cache-Control": "public, max-age=86400",
-		},
-		next: { revalidate: 86400 }, // Revalidate cache once a day
-	})
-	return response.json()
+	try {
+		const response = await fetch(`https://api.github.com/user/${authorId}`, {
+			headers: {
+				Authorization: `Bearer ${process.env.GITHUB_TOKEN}`,
+				"Cache-Control": "public, max-age=86400",
+			},
+			next: { revalidate: 86400 }, // Revalidate cache once a day
+		})
+
+		if (!response.ok) {
+			// If unauthorized or other error, return a default user object
+			if (response.status === 401 || response.status === 403) {
+				console.warn(`GitHub API rate limit or authorization issue: ${response.statusText}`)
+				return {
+					login: "unknown",
+					avatar_url: "https://avatars.githubusercontent.com/u/0",
+					html_url: "https://github.com",
+					name: "Unknown User",
+					bio: null,
+				}
+			}
+			throw new ApiError(`Failed to fetch author data: ${response.statusText}`, response.status)
+		}
+
+		return response.json()
+	} catch (error) {
+		console.error("Error fetching author data:", error)
+		// Even for unexpected errors, return a default user to prevent page failures
+		return {
+			login: "unknown",
+			avatar_url: "https://avatars.githubusercontent.com/u/0",
+			html_url: "https://github.com",
+			name: "Unknown User",
+			bio: null,
+		}
+	}
 }

 /**
- * Fetches featured icons for the homepage
+ * Fetches total icon count
 */
 export async function getTotalIcons() {
-	const iconsData = await getAllIcons()
+	try {
+		const iconsData = await getAllIcons()

-	return {
-		totalIcons: Object.keys(iconsData).length,
+		return {
+			totalIcons: Object.keys(iconsData).length,
+		}
+	} catch (error) {
+		console.error("Error getting total icons:", error)
+		throw error
 	}
 }

@@ -77,12 +154,17 @@ export async function getTotalIcons() {
 * Fetches recently added icons sorted by timestamp
 */
 export async function getRecentlyAddedIcons(limit = 8): Promise<IconWithName[]> {
-	const icons = await getIconsArray()
+	try {
+		const icons = await getIconsArray()

-	return icons
-		.sort((a, b) => {
-			// Sort by timestamp in descending order (newest first)
-			return new Date(b.data.update.timestamp).getTime() - new Date(a.data.update.timestamp).getTime()
-		})
-		.slice(0, limit)
+		return icons
+			.sort((a, b) => {
+				// Sort by timestamp in descending order (newest first)
+				return new Date(b.data.update.timestamp).getTime() - new Date(a.data.update.timestamp).getTime()
+			})
+			.slice(0, limit)
+	} catch (error) {
+		console.error("Error getting recently added icons:", error)
+		throw error
+	}
 }
--- a/web/src/lib/utils.ts
+++ b/web/src/lib/utils.ts
@@ -4,3 +4,122 @@ import { twMerge } from "tailwind-merge"
 export function cn(...inputs: ClassValue[]) {
 	return twMerge(clsx(inputs))
 }
+
+/**
+ * Calculate Levenshtein distance between two strings
+ */
+export function levenshteinDistance(a: string, b: string): number {
+	const matrix: number[][] = []
+
+	// Initialize the matrix
+	for (let i = 0; i <= b.length; i++) {
+		matrix[i] = [i]
+	}
+	for (let j = 0; j <= a.length; j++) {
+		matrix[0][j] = j
+	}
+
+	// Fill the matrix
+	for (let i = 1; i <= b.length; i++) {
+		for (let j = 1; j <= a.length; j++) {
+			const cost = a[j - 1] === b[i - 1] ? 0 : 1
+			matrix[i][j] = Math.min(
+				matrix[i - 1][j] + 1, // deletion
+				matrix[i][j - 1] + 1, // insertion
+				matrix[i - 1][j - 1] + cost, // substitution
+			)
+		}
+	}
+
+	return matrix[b.length][a.length]
+}
+
+/**
+ * Calculate similarity score between two strings (0-1)
+ * Higher score means more similar
+ */
+export function calculateStringSimilarity(str1: string, str2: string): number {
+	if (!str1.length || !str2.length) return 0
+	if (str1 === str2) return 1
+
+	const distance = levenshteinDistance(str1.toLowerCase(), str2.toLowerCase())
+	const maxLength = Math.max(str1.length, str2.length)
+	return 1 - distance / maxLength
+}
+
+/**
+ * Check if string contains all characters from query in order
+ * Returns match score (0 if no match)
+ */
+export function containsCharsInOrder(str: string, query: string): number {
+	if (!query) return 1
+	if (!str) return 0
+
+	const normalizedStr = str.toLowerCase()
+	const normalizedQuery = query.toLowerCase()
+
+	let strIndex = 0
+	let queryIndex = 0
+
+	while (strIndex < normalizedStr.length && queryIndex < normalizedQuery.length) {
+		if (normalizedStr[strIndex] === normalizedQuery[queryIndex]) {
+			queryIndex++
+		}
+		strIndex++
+	}
+
+	// If we matched all characters in the query
+	if (queryIndex === normalizedQuery.length) {
+		// Calculate a score based on closeness of matches
+		// Higher score if characters are close together
+		const matchRatio = normalizedStr.length / (strIndex + 1)
+		return matchRatio
+	}
+
+	return 0
+}
+
+/**
+ * Advanced fuzzy search with multiple scoring methods
+ * Returns a score from 0-1, where 1 is a perfect match
+ */
+export function fuzzySearch(text: string, query: string): number {
+	if (!query) return 1
+	if (!text) return 0
+
+	// Direct inclusion check (highest priority)
+	const normalizedText = text.toLowerCase()
+	const normalizedQuery = query.toLowerCase()
+
+	if (normalizedText === normalizedQuery) return 1
+	if (normalizedText.includes(normalizedQuery)) return 0.9
+
+	// Check for character sequence matches
+	const sequenceScore = containsCharsInOrder(normalizedText, normalizedQuery)
+
+	// Calculate string similarity
+	const similarityScore = calculateStringSimilarity(normalizedText, normalizedQuery)
+
+	// Word-by-word matching for multi-word queries
+	const textWords = normalizedText.split(/\s+/)
+	const queryWords = normalizedQuery.split(/\s+/)
+
+	let wordMatchCount = 0
+	for (const queryWord of queryWords) {
+		for (const textWord of textWords) {
+			if (
+				textWord.includes(queryWord) ||
+				calculateStringSimilarity(textWord, queryWord) > 0.7 ||
+				containsCharsInOrder(textWord, queryWord) > 0
+			) {
+				wordMatchCount++
+				break
+			}
+		}
+	}
+
+	const wordMatchScore = queryWords.length > 0 ? wordMatchCount / queryWords.length : 0
+
+	// Combine scores with weights
+	return Math.max(sequenceScore * 0.3, similarityScore * 0.3, wordMatchScore * 0.4)
+}