Merge branch 'main' into feat/pagination

feat(web): Optimize SEO (#1260 )
chore(web): Update Carbon ID
2025-10-26 04:59:03 +08:00 · 2025-04-24 18:28:47 +02:00 · 2025-04-24 18:22:15 +02:00 · 2025-04-24 16:31:45 +02:00 · 2025-04-24 16:31:07 +02:00 · 2025-04-24 16:13:42 +02:00
31 changed files with 1893 additions and 729 deletions
--- a/.github/ISSUE_TEMPLATE/add_monochrome_icon.yml
+++ b/.github/ISSUE_TEMPLATE/add_monochrome_icon.yml
@@ -1,5 +1,5 @@
-name: "Add light/dark icon"
-description: Submit a new icon with light and dark versions.
+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.
 title: "feat(icons): add [NAME]"
 labels: ["monochrome-icon"]
 body:
--- a/.github/ISSUE_TEMPLATE/add_normal_icon.yml
+++ b/.github/ISSUE_TEMPLATE/add_normal_icon.yml
@@ -1,5 +1,5 @@
-name: "Add standard icon"
-description: Submit a new icon for both light and dark themes.
+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.
 title: "feat(icons): add [NAME]"
 labels: ["normal-icon"]
 body:
@@ -10,16 +10,19 @@ body:
        Once you've submitted the issue, sombody from the team will review it, before adding a label which automatically creates a pull request with the other filetypes.
        If you submit a PNG icon, please note, that the SVG can not be generated from it.
  - type: input
+    id: name
    attributes:
      label: Icon name
      description: The name has to be unique and should be kebab-case.
      placeholder: e.g. "icon-name"
  - type: textarea
+    id: icon
    attributes:
      label: Paste icon
      description: |
        Please paste the icon here. It will automatically upload it to github.
  - type: dropdown
+    id: type
    attributes:
      label: Icon type
      options:
--- a/.github/ISSUE_TEMPLATE/update_monochrome_icon.yml
+++ b/.github/ISSUE_TEMPLATE/update_monochrome_icon.yml
@@ -1,5 +1,5 @@
-name: "Update light/dark icon"
-description: Improve or update an existing light/dark icon.
+name: "Update light & dark icon"
+description: Use this template to update an existing icon. Monochrome icons need both light and dark versions.
 title: "feat(icons): update [NAME]"
 labels: ["monochrome-icon"]
 body:
--- a/.github/ISSUE_TEMPLATE/update_normal_icon.yml
+++ b/.github/ISSUE_TEMPLATE/update_normal_icon.yml
@@ -1,5 +1,5 @@
-name: "Update standard icon"
-description: Improve or update an existing standard icon.
+name: "Update normal icon"
+description: Use this template to update an existing icon. Normal icons work for both light and dark themes.
 title: "feat(icons): update [NAME]"
 labels: ["normal-icon"]
 body:
--- a/SEO.md
+++ b/SEO.md
@@ -0,0 +1,916 @@
+# Dashboard Icons SEO Audit 2025
+
+## Overview
+
+This document presents a comprehensive SEO audit for the Dashboard Icons website built with Next.js 15.3. The audit analyzes current implementation and provides detailed recommendations based on the latest Next.js best practices for optimal search engine visibility and performance.
+
+## Table of Contents
+
+- [Current Implementation Assessment](#current-implementation-assessment)
+- [Metadata Implementation](#metadata-implementation)
+- [SEO Optimization Checklist](#seo-optimization-checklist)
+- [Technical SEO](#technical-seo)
+- [Performance Optimization](#performance-optimization)
+- [Content and User Experience](#content-and-user-experience)
+- [Mobile Optimization](#mobile-optimization)
+- [Advanced Next.js 15.3 SEO Features](#advanced-nextjs-153-seo-features)
+- [Recommendations](#recommendations)
+- [Conclusion](#conclusion)
+- [References](#references)
+
+## Current Implementation Assessment
+
+The Dashboard Icons project currently implements several good SEO practices:
+
+- [x] Basic metadata configuration in layout.tsx and page.tsx files
+- [x] Dynamic title and description generation with appropriate keyword inclusion
+- [x] Open Graph tags for social sharing with proper image dimensions
+- [x] Twitter Card metadata implementation for social visibility
+- [x] Proper use of semantic HTML elements for content structure
+- [x] Server-side rendering for improved indexing and crawler access
+- [x] Canonical URLs properly configured across page types
+- [x] Image optimization with next/image component for improved Core Web Vitals
+
+However, there are several opportunities for improvement:
+
+- [ ] No robots.txt implementation for directing crawler behavior
+- [ ] Missing XML sitemap for improved content discovery
+- [ ] No structured data (JSON-LD) for enhanced search results
+- [ ] Limited use of advanced Next.js 15.3 metadata features
+- [ ] Missing breadcrumb navigation for enhanced user experience and SEO
+- [ ] No dynamic OG images for improved social sharing
+
+## Metadata Implementation
+
+The project uses Next.js App Router's built-in metadata API effectively across different page types:
+
+### Root Layout Metadata Analysis
+
+In `layout.tsx`, the site establishes global metadata that provides a solid foundation:
+
+```typescript
+// In layout.tsx
+export async function generateMetadata(): Promise<Metadata> {
+  const { totalIcons } = await getTotalIcons()
+
+  return {
+    metadataBase: new URL(WEB_URL),
+    title: websiteTitle,
+    description: getDescription(totalIcons),
+    keywords: ["dashboard icons", "service icons", "application icons", "tool icons", "web dashboard", "app directory"],
+    robots: {
+      index: true,
+      follow: true,
+      googleBot: "index, follow",
+    },
+    openGraph: {
+      siteName: WEB_URL,
+      title: websiteTitle,
+      url: BASE_URL,
+      description: getDescription(totalIcons),
+      images: [
+        {
+          url: "/og-image.png",
+          width: 1200,
+          height: 630,
+          alt: "Dashboard Icons - Dashboard icons for self hosted services",
+          type: "image/png",
+        },
+      ],
+    },
+    twitter: {
+      card: "summary_large_image",
+      title: WEB_URL,
+      description: getDescription(totalIcons),
+      images: ["/og-image.png"],
+    },
+    applicationName: WEB_URL,
+    alternates: {
+      canonical: BASE_URL,
+    },
+    // Additional configurations...
+  }
+}
+```
+
+**Strengths:**
+- Properly sets metadataBase for all relative URLs
+- Includes comprehensive metadata for SEO and social sharing
+- Dynamically generates description based on content (totalIcons)
+- Properly configures robots directives
+
+**Areas for improvement:**
+- The `websiteTitle` ("Free Dashboard Icons - Download High-Quality UI & App Icons") could be more specific
+- The OpenGraph URL points to BASE_URL (CDN) rather than WEB_URL (the actual site)
+- Twitter title uses WEB_URL instead of an actual title
+- Missing locale information for international SEO
+
+### Page-Specific Metadata Analysis
+
+For individual icon pages, metadata is comprehensively generated based on icon data:
+
+```typescript
+// In [icon]/page.tsx
+export async function generateMetadata({ params, searchParams }: Props, parent: ResolvingMetadata): Promise<Metadata> {
+  const { icon } = await params
+  const iconsData = await getAllIcons()
+  // ...processing code...
+  const formattedIconName = icon
+    .split("-")
+    .map((word) => word.charAt(0).toUpperCase() + word.slice(1))
+    .join(" ")
+
+  return {
+    title: `${formattedIconName} Icon | Dashboard Icons`,
+    description: `Download the ${formattedIconName} icon in SVG, PNG, and WEBP formats for FREE. Part of a collection of ${totalIcons} curated icons...`,
+    openGraph: {
+      title: `${formattedIconName} Icon | Dashboard Icons`,
+      description: `Download the ${formattedIconName} icon in SVG, PNG, and WEBP formats for FREE...`,
+      type: "article",
+      url: pageUrl,
+      authors: [authorName],
+      publishedTime: updateDate.toISOString(),
+      modifiedTime: updateDate.toISOString(),
+      section: "Icons",
+      tags: [formattedIconName, "dashboard icon", "service icon", ...],
+    },
+    twitter: {
+      card: "summary_large_image",
+      title: `${formattedIconName} Icon | Dashboard Icons`,
+      description: `Download the ${formattedIconName} icon...`,
+      images: [iconImageUrl],
+    },
+    alternates: {
+      canonical: pageUrl,
+      media: {
+        png: iconImageUrl,
+        svg: `${BASE_URL}/svg/${icon}.svg`,
+        webp: `${BASE_URL}/webp/${icon}.webp`,
+      },
+    },
+  }
+}
+```
+
+**Strengths:**
+- Excellent dynamic title generation with proper formatting
+- Comprehensive description with icon-specific information
+- Proper OpenGraph article configuration with author and timestamp data
+- Well-structured alternates configuration for different media types
+- Good keyword inclusion in meta tags
+
+**Areas for improvement:**
+- Could benefit from structured data for product/image entity
+- Could implement dynamic OG images with the ImageResponse API
+
+### Icons Browse Page Metadata Analysis
+
+The icons browse page implements specific metadata optimized for its purpose:
+
+```typescript
+// In icons/page.tsx
+export async function generateMetadata(): Promise<Metadata> {
+  const icons = await getIconsArray()
+  const totalIcons = icons.length
+
+  return {
+    title: "Browse Icons | Free Dashboard Icons",
+    description: `Search and browse through our collection of ${totalIcons} curated icons for services, applications and tools...`,
+    keywords: [
+      "browse icons",
+      "dashboard icons",
+      "icon search",
+      // ...
+    ],
+    openGraph: {
+      title: "Browse Icons | Free Dashboard Icons",
+      description: `Search and browse through our collection of ${totalIcons} curated icons...`,
+      // ...
+    },
+    // Additional configurations...
+  }
+}
+```
+
+**Strengths:**
+- Clear, purpose-driven title
+- Dynamic description that includes the collection size
+- Relevant keywords for the browse page functionality
+
+**Areas for improvement:**
+- Could implement pagination metadata (prev/next) if applicable
+- Missing structured data for collection/gallery
+
+## SEO Optimization Checklist
+
+### Metadata and Head Tags
+
+- [x] Page titles are unique, descriptive, and include keywords
+- [x] Meta descriptions are compelling and keyword-rich (under 160 characters)
+- [x] Open Graph tags are implemented for social sharing
+- [x] Twitter Card metadata is implemented
+- [x] Canonical URLs are properly set
+- [ ] Structured data/JSON-LD for rich snippets
+- [x] Properly configured viewport meta tag
+- [x] Favicon and apple-touch-icon are set
+- [x] Keywords meta tag is implemented (though not as influential for rankings as before)
+- [ ] Language and locale information (hreflang) for international SEO
+
+### Indexation and Crawling
+
+- [x] Server-side rendering for improved indexability
+- [ ] robots.txt file implementation
+- [ ] XML sitemap generation
+- [x] Proper HTTP status codes (200, 404, etc.)
+- [x] Internal linking structure
+- [ ] Pagination handling with proper rel="next" and rel="prev" tags
+- [ ] Implementation of dynamic sitemap with Next.js 15.3 file-based API
+
+### Content Structure
+
+- [x] Clean URL structure (`/icons/[icon]`)
+- [x] Semantic HTML headings (h1, h2, etc.)
+- [x] Content hierarchy matches visual hierarchy
+- [ ] Breadcrumb navigation for improved user experience and crawlability
+- [ ] Schema.org markup for content types
+
+## Technical SEO
+
+### Server-side Rendering and Static Generation
+
+The project effectively uses Next.js App Router to implement:
+
+- **Static Generation (SSG)** for homepage and catalog pages, providing fast initial load times and improved indexability
+- **Server-Side Rendering (SSR)** for dynamic content, ensuring fresh content is always accessible to crawlers
+- **Incremental Static Regeneration (ISR)** potential for optimal performance and content freshness
+
+These approaches ensure search engines can properly crawl and index content while providing optimal performance.
+
+### Dynamic Routes Implementation
+
+Dynamic routes like `/icons/[icon]` are properly implemented with `generateStaticParams` to pre-render paths at build time:
+
+```typescript
+export async function generateStaticParams() {
+  const iconsData = await getAllIcons()
+  return Object.keys(iconsData).map((icon) => ({
+    icon,
+  }))
+}
+```
+
+This approach ensures all icon pages are pre-rendered during build time, optimizing both performance and SEO by making all content immediately available to search engine crawlers without requiring JavaScript execution.
+
+### Missing Critical Components
+
+#### robots.txt Implementation
+
+Currently missing a robots.txt file which is essential for directing search engine crawlers. Next.js 15.3 offers a file-based API that should be implemented:
+
+```typescript
+// app/robots.ts
+import { MetadataRoute } from 'next'
+
+export default function robots(): MetadataRoute.Robots {
+  return {
+    rules: {
+      userAgent: '*',
+      allow: '/',
+    },
+    sitemap: 'https://dashboardicons.com/sitemap.xml',
+  }
+}
+```
+
+#### sitemap.xml Implementation
+
+No sitemap implementation was found. A sitemap is critical for search engines to discover and index all pages efficiently. Next.js 15.3's file-based API makes this easy to implement:
+
+```typescript
+// app/sitemap.ts
+import { MetadataRoute } from 'next'
+import { getAllIcons } from '@/lib/api'
+import { BASE_URL, WEB_URL } from '@/constants'
+
+export default async function sitemap(): MetadataRoute.Sitemap {
+  const iconsData = await getAllIcons()
+  const lastModified = new Date()
+
+  // Base routes
+  const routes = [
+    {
+      url: WEB_URL,
+      lastModified,
+      changeFrequency: 'weekly',
+      priority: 1.0,
+    },
+    {
+      url: `${WEB_URL}/icons`,
+      lastModified,
+      changeFrequency: 'daily',
+      priority: 0.9,
+    },
+    // Other static routes
+  ]
+
+  // Icon routes
+  const iconRoutes = Object.keys(iconsData).map((icon) => ({
+    url: `${WEB_URL}/icons/${icon}`,
+    lastModified: new Date(iconsData[icon].update.timestamp),
+    changeFrequency: 'weekly' as const,
+    priority: 0.7,
+  }))
+
+  return [...routes, ...iconRoutes]
+}
+```
+
+For larger icon collections, Next.js 15.3 supports `generateSitemaps` for creating multiple sitemap files:
+
+```typescript
+// app/sitemap.ts
+export async function generateSitemaps() {
+  const totalIcons = await getTotalIconCount()
+  // Google's limit is 50,000 URLs per sitemap
+  const sitemapsNeeded = Math.ceil(totalIcons / 50000)
+  
+  return Array.from({ length: sitemapsNeeded }, (_, i) => ({ id: i }))
+}
+
+export default async function sitemap({ id }: { id: number }): Promise<MetadataRoute.Sitemap> {
+  // Fetch icons for this specific sitemap segment
+  // ...implementation
+}
+```
+
+#### JSON-LD Structured Data
+
+Missing structured data for improved search results appearance. For icon pages, implement ImageObject schema:
+
+```typescript
+// In [icon]/page.tsx component
+import { JsonLd } from 'next-seo';
+
+// Within component return statement
+return (
+  <>
+    <JsonLd
+      type="ImageObject"
+      data={{
+        '@context': 'https://schema.org',
+        '@type': 'ImageObject',
+        name: `${formattedIconName} Icon`,
+        description: `Dashboard icon for ${formattedIconName}`,
+        contentUrl: `${BASE_URL}/png/${icon}.png`,
+        license: 'https://creativecommons.org/licenses/by-sa/4.0/',
+        acquireLicensePage: `${WEB_URL}/icons/${icon}`,
+        creditText: `Dashboard Icons`,
+        creator: {
+          '@type': 'Person',
+          name: authorData.name || authorData.login
+        }
+      }}
+    />
+    <IconDetails icon={icon} iconData={originalIconData} authorData={authorData} />
+  </>
+)
+```
+
+For the homepage, implement Organization schema:
+
+```typescript
+// In layout.tsx or page.tsx
+import { JsonLd } from 'next-seo';
+
+// Within component return statement
+<JsonLd
+  type="Organization"
+  data={{
+    '@context': 'https://schema.org',
+    '@type': 'Organization',
+    name: 'Dashboard Icons',
+    url: WEB_URL,
+    logo: `${WEB_URL}/logo.png`,
+    description: 'Collection of free icons for self-hosted dashboards and services',
+    sameAs: [
+      REPO_PATH,
+      // Social media links if available
+    ]
+  }}
+/>
+```
+
+## Performance Optimization
+
+### Core Web Vitals
+
+Performance is a crucial SEO factor. Current implementation has:
+
+- [x] Image optimization through next/image (reduces LCP)
+- [x] Font optimization with the Inter variable font
+- [ ] Proper lazy loading of below-the-fold content
+- [ ] Optimized Cumulative Layout Shift (CLS)
+- [ ] Interaction to Next Paint (INP) optimization
+
+### Detailed Recommendations
+
+#### 1. Image Optimization
+
+- **Priority attribute**: Add priority attribute to critical above-the-fold images:
+  ```tsx
+  <Image 
+    src="/hero-image.jpg" 
+    alt="Dashboard Icons" 
+    width={1200} 
+    height={630} 
+    priority 
+  />
+  ```
+
+- **Size optimization**: Ensure images use appropriate sizes for their display contexts:
+  ```tsx
+  <Image 
+    src={`${BASE_URL}/png/${icon}.png`}
+    alt={`${formattedIconName} icon`} 
+    width={64} 
+    height={64} 
+    sizes="(max-width: 640px) 32px, (max-width: 1024px) 48px, 64px" 
+  />
+  ```
+
+#### 2. JavaScript Optimization
+
+- **Use dynamic imports**: Implement dynamic imports for non-critical components:
+  ```tsx
+  import dynamic from 'next/dynamic'
+  
+  const IconGrid = dynamic(() => import('@/components/IconGrid'), {
+    loading: () => <p>Loading icons...</p>,
+  })
+  ```
+
+- **Component-level code splitting**: Break large components into smaller, more manageable pieces
+
+#### 3. Core Web Vitals Focus
+
+- **LCP Optimization**:
+  - Preload critical resources
+  - Optimize server response time
+  - Prioritize above-the-fold content rendering
+
+- **CLS Minimization**:
+  - Reserve space for dynamic content
+  - Define explicit width/height for images and embeds
+  - Avoid inserting content above existing content
+
+- **INP Improvement**:
+  - Optimize event handlers
+  - Use debouncing for input-related events
+  - Avoid long-running JavaScript tasks
+
+## Content and User Experience
+
+- [x] Clean, semantic HTML structure 
+- [x] Clear content hierarchy with proper heading tags
+- [ ] Comprehensive alt text for all images
+- [x] Mobile-friendly responsive design
+- [ ] Breadcrumb navigation for improved user experience and SEO
+- [ ] Related icons section for internal linking and improved user engagement
+
+### Recommended Content Improvements
+
+#### Breadcrumb Navigation
+
+Implement structured breadcrumb navigation with Schema.org markup:
+
+```tsx
+// components/Breadcrumbs.tsx
+import Link from 'next/link'
+import { JsonLd } from 'next-seo'
+
+interface BreadcrumbItem {
+  name: string
+  url: string
+}
+
+export function Breadcrumbs({ items }: { items: BreadcrumbItem[] }) {
+  return (
+    <>
+      <JsonLd
+        type="BreadcrumbList"
+        data={{
+          '@context': 'https://schema.org',
+          '@type': 'BreadcrumbList',
+          itemListElement: items.map((item, index) => ({
+            '@type': 'ListItem',
+            position: index + 1,
+            name: item.name,
+            item: item.url,
+          })),
+        }}
+      />
+      <nav aria-label="Breadcrumb" className="breadcrumbs">
+        <ol>
+          {items.map((item, index) => (
+            <li key={item.url}>
+              {index < items.length - 1 ? (
+                <Link href={item.url}>{item.name}</Link>
+              ) : (
+                <span aria-current="page">{item.name}</span>
+              )}
+            </li>
+          ))}
+        </ol>
+      </nav>
+    </>
+  )
+}
+```
+
+#### Related Icons Section
+
+Add a related icons section to improve internal linking and user engagement:
+
+```tsx
+// components/RelatedIcons.tsx
+import Link from 'next/link'
+import Image from 'next/image'
+import { BASE_URL } from '@/constants'
+
+export function RelatedIcons({ 
+  currentIcon, 
+  similarIcons 
+}: { 
+  currentIcon: string, 
+  similarIcons: string[] 
+}) {
+  return (
+    <section aria-labelledby="related-icons-heading">
+      <h2 id="related-icons-heading">Related Icons</h2>
+      <div className="icon-grid">
+        {similarIcons.map(icon => (
+          <Link 
+            key={icon} 
+            href={`/icons/${icon}`}
+            className="icon-card"
+          >
+            <Image
+              src={`${BASE_URL}/png/${icon}.png`}
+              alt={`${icon.split('-').map(word => word.charAt(0).toUpperCase() + word.slice(1)).join(' ')} icon`}
+              width={48}
+              height={48}
+            />
+            <span>{icon.split('-').map(word => word.charAt(0).toUpperCase() + word.slice(1)).join(' ')}</span>
+          </Link>
+        ))}
+      </div>
+    </section>
+  )
+}
+```
+
+## Mobile Optimization
+
+- [x] Responsive design with fluid layouts
+- [x] Appropriate viewport configuration:
+  ```html
+  <meta name="viewport" content="width=device-width, initial-scale=1, minimumScale=1, maximumScale=5, userScalable=true, themeColor=#ffffff, viewportFit=cover" />
+  ```
+- [ ] Touch-friendly navigation and interface elements (minimum 44x44px tap targets)
+- [ ] Mobile page speed optimization (reduced JavaScript, optimized images)
+
+### Mobile-Specific Recommendations
+
+1. **Implement mobile-specific image handling**:
+   ```tsx
+   <Image
+     src={`${BASE_URL}/png/${icon}.png`}
+     alt={`${formattedIconName} icon`}
+     width={64}
+     height={64}
+     sizes="(max-width: 480px) 32px, 64px"
+     quality={90}
+   />
+   ```
+
+2. **Enhanced touch targets for mobile**:
+   ```css
+   @media (max-width: 768px) {
+     .nav-link, .button, .interactive-element {
+       min-height: 44px;
+       min-width: 44px;
+       padding: 12px;
+     }
+   }
+   ```
+
+3. **Simplified navigation for mobile**:
+   Implement a hamburger menu or collapsible navigation for mobile devices
+
+## Advanced Next.js 15.3 SEO Features
+
+Next.js 15.3 offers enhanced SEO features that should be implemented:
+
+### Dynamic OG Images
+
+Implement dynamic Open Graph images using the ImageResponse API:
+
+```typescript
+// app/icons/[icon]/opengraph-image.tsx
+import { ImageResponse } from 'next/og'
+import { getAllIcons } from '@/lib/api'
+import { BASE_URL } from '@/constants'
+
+export const runtime = 'edge'
+export const alt = 'Dashboard Icon Preview'
+export const size = { width: 1200, height: 630 }
+export const contentType = 'image/png'
+
+export default async function OgImage({ params }: { params: { icon: string } }) {
+  const { icon } = params
+  const iconsData = await getAllIcons()
+  const iconData = iconsData[icon]
+  
+  if (!iconData) {
+    return new ImageResponse(
+      (
+        <div
+          style={{
+            display: 'flex',
+            flexDirection: 'column',
+            alignItems: 'center',
+            justifyContent: 'center',
+            width: '100%',
+            height: '100%',
+            backgroundColor: '#f8fafc',
+            color: '#334155',
+            fontFamily: 'sans-serif',
+          }}
+        >
+          <h1 style={{ fontSize: 64 }}>Icon Not Found</h1>
+        </div>
+      )
+    )
+  }
+  
+  const formattedIconName = icon
+    .split('-')
+    .map((word) => word.charAt(0).toUpperCase() + word.slice(1))
+    .join(' ')
+  
+  return new ImageResponse(
+    (
+      <div
+        style={{
+          display: 'flex',
+          flexDirection: 'column',
+          alignItems: 'center',
+          justifyContent: 'center',
+          width: '100%',
+          height: '100%',
+          backgroundColor: '#f8fafc',
+          color: '#334155',
+          fontFamily: 'sans-serif',
+          padding: 40,
+        }}
+      >
+        <img
+          src={`${BASE_URL}/png/${icon}.png`}
+          width={200}
+          height={200}
+          alt={`${formattedIconName} icon`}
+          style={{ marginBottom: 40 }}
+        />
+        <h1 style={{ fontSize: 64, marginBottom: 20, textAlign: 'center' }}>
+          {formattedIconName} Icon
+        </h1>
+        <p style={{ fontSize: 32, textAlign: 'center' }}>
+          Free download in SVG, PNG, and WEBP formats
+        </p>
+      </div>
+    )
+  )
+}
+```
+
+### Next.js Route Segments for SEO
+
+Utilize route segment config options to optimize SEO aspects:
+
+```typescript
+// app/icons/[icon]/page.tsx
+export const dynamic = 'force-static' // Ensure static generation even with dynamic data fetching
+export const revalidate = 3600 // Revalidate content every hour
+export const fetchCache = 'force-cache' // Enforce caching of fetched data
+export const generateStaticParams = async () => {
+  // Generate static paths for all icons
+  const iconsData = await getAllIcons()
+  return Object.keys(iconsData).map((icon) => ({ icon }))
+}
+```
+
+### Advanced Caching Strategies
+
+Implement advanced caching with revalidation tags for dynamic content:
+
+```typescript
+// lib/api.ts
+import { cache, revalidateTag } from 'next/cache'
+
+// Cache API calls using tags
+export const getTotalIcons = cache(
+  async () => {
+    const response = await fetch(METADATA_URL, {
+      next: { tags: ['icons-metadata'] },
+    })
+    const data = await response.json()
+    return { totalIcons: Object.keys(data).length }
+  }
+)
+
+// Function to trigger revalidation when new icons are added
+export async function revalidateIconsCache() {
+  revalidateTag('icons-metadata')
+}
+```
+
+## Recommendations
+
+### Immediate (High Impact/Low Effort)
+
+1. **Create robots.txt**
+   - Implement a file-based robots.txt using Next.js 15.3 API
+   - Include sitemap reference
+   ```typescript
+   // app/robots.ts
+   import { MetadataRoute } from 'next'
+   
+   export default function robots(): MetadataRoute.Robots {
+     return {
+       rules: {
+         userAgent: '*',
+         allow: '/',
+       },
+       sitemap: 'https://dashboardicons.com/sitemap.xml',
+     }
+   }
+   ```
+
+2. **Generate XML Sitemap**
+   - Create a dynamic sitemap.xml file using Next.js 15.3 file-based API
+   - Include changefreq and priority attributes
+   - Implement sitemap index for large icon collections
+   ```typescript
+   // app/sitemap.ts
+   import { MetadataRoute } from 'next'
+   import { getAllIcons } from '@/lib/api'
+   import { WEB_URL } from '@/constants'
+   
+   export default async function sitemap(): MetadataRoute.Sitemap {
+     const iconsData = await getAllIcons()
+     // Implementation as shown in Technical SEO section
+   }
+   ```
+
+3. **Add Structured Data**
+   - Implement JSON-LD for icon pages (ImageObject schema)
+   - Add WebSite schema to the homepage
+   - Include BreadcrumbList schema for navigation
+   ```typescript
+   // app/layout.tsx
+   import { JsonLd } from 'next-seo'
+   
+   // In component return
+   <JsonLd
+     type="WebSite"
+     data={{
+       '@context': 'https://schema.org',
+       '@type': 'WebSite',
+       name: 'Dashboard Icons',
+       url: WEB_URL,
+       description: getDescription(totalIcons),
+       potentialAction: {
+         '@type': 'SearchAction',
+         target: `${WEB_URL}/icons?q={search_term_string}`,
+         'query-input': 'required name=search_term_string'
+       }
+     }}
+   />
+   ```
+
+4. **Enhance Internal Linking**
+   - Implement breadcrumb navigation
+   - Add "related icons" or "similar icons" sections
+   - Create more internal links between icon categories or tags
+
+### Medium-term Improvements
+
+1. **Performance Optimization**
+   - Implement priority attribute for critical images
+   - Optimize component-level code splitting
+   - Refine Largest Contentful Paint (LCP) elements
+   
+2. **Enhanced Metadata**
+   - Implement dynamic OG images with the ImageResponse API
+   - Add more specific structured data for each icon category
+   - Implement comprehensive hreflang tags if multilingual support is added
+
+3. **Content Enhancement**
+   - Add more descriptive text for each icon
+   - Include usage examples and contexts
+   - Improve alt text for all images with detailed descriptions
+
+### Long-term Strategy
+
+1. **Advanced Metrics Tracking**
+   - Implement Real User Monitoring (RUM)
+   - Set up Core Web Vitals tracking in the field
+   - Establish regular SEO audit cycles
+
+2. **Enhanced User Experience**
+   - Implement advanced search functionality with filtering options
+   - Add user collections/favorites feature
+   - Develop a comprehensive filtering system by icon type, style, color, etc.
+
+3. **Content Expansion**
+   - Add tutorials on how to use the icons
+   - Create themed icon collections
+   - Implement a blog for icon design tips and updates
+
+## Conclusion
+
+### Overall SEO Health Assessment
+
+The Dashboard Icons website currently implements many SEO best practices through Next.js 15.3's App Router features. The project demonstrates strong implementation of:
+
+- Metadata configuration with the built-in Metadata API
+- Dynamic generation of page-specific metadata
+- Open Graph and Twitter Card integration
+- Server-side rendering and static generation
+- Proper canonical URL management
+- Clean, semantic HTML structure
+- Responsive design for mobile devices
+
+However, several critical components are missing that would significantly improve search engine visibility:
+
+1. **Missing Technical Components**:
+   - No robots.txt file
+   - No XML sitemap
+   - No structured data (JSON-LD)
+   - Limited use of Next.js 15.3's advanced features
+
+2. **Performance Optimization Gaps**:
+   - Missing priority attributes on critical images
+   - Limited implementation of advanced caching strategies
+   - Potential Core Web Vitals optimizations
+
+3. **Enhanced User Experience Opportunities**:
+   - No breadcrumb navigation
+   - Limited internal linking between related icons
+   - Missing advanced search and filtering capabilities
+
+### SEO Implementation Score
+
+| Category | Score | Notes |
+|----------|-------|-------|
+| Metadata Implementation | 8/10 | Strong implementation, missing structured data |
+| Technical SEO | 6/10 | Missing robots.txt and sitemap |
+| Performance | 7/10 | Good image optimization, room for improvement |
+| Content Structure | 7/10 | Semantic HTML present, needs better internal linking |
+| Mobile Optimization | 8/10 | Responsive design, opportunity for touch optimizations |
+| Next.js 15.3 Features | 5/10 | Not utilizing latest features like dynamic OG images |
+| Overall | 6.8/10 | Good foundation, specific improvements needed |
+
+### Priority Action Items
+
+1. **Immediate (High Impact/Low Effort)**:
+   - Create robots.txt file using file-based API
+   - Generate XML sitemap with Next.js 15.3 API
+   - Add JSON-LD structured data to all page types
+   
+2. **Short-term (Medium Impact)**:
+   - Optimize Core Web Vitals (LCP, CLS, INP)
+   - Add priority attribute to above-the-fold images
+   - Implement breadcrumb navigation with schema
+   
+3. **Long-term (Strategic)**:
+   - Implement dynamic OG images with ImageResponse API
+   - Add more descriptive content for each icon
+   - Develop a comprehensive internal linking strategy
+   - Consider content expansion with tutorials and icon usage guides
+
+By implementing these SEO improvements, Dashboard Icons will significantly enhance its search engine visibility, user experience, and overall organic traffic growth potential. The existing implementation provides a solid foundation, and these targeted enhancements will help maximize the site's search performance in an increasingly competitive landscape.
+
+## References
+
+1. [Next.js 15.3 Metadata API Documentation](https://nextjs.org/docs/app/building-your-application/optimizing/metadata)
+2. [Google's SEO Starter Guide](https://developers.google.com/search/docs/fundamentals/seo-starter-guide)
+3. [Next.js File-Based Metadata](https://nextjs.org/docs/app/api-reference/file-conventions/metadata)
+4. [Core Web Vitals - Google Web Dev](https://web.dev/articles/vitals)
+5. [Schema.org Documentation](https://schema.org/docs/documents.html)
+6. [Next.js Image Component Documentation](https://nextjs.org/docs/app/api-reference/components/image)
+7. [Next.js ImageResponse API](https://nextjs.org/docs/app/api-reference/functions/image-response)
+8. [Google Search Central Documentation](https://developers.google.com/search)
+9. [Next.js 15.3 App Router SEO Checklist](https://dev.to/simplr_sh/nextjs-15-app-router-seo-comprehensive-checklist-3d3f)
+10. [Mobile Optimization - Google Search Central](https://developers.google.com/search/mobile-sites)
+11. [Next.js 15.3 Performance Optimization](https://nextjs.org/docs/app/building-your-application/optimizing) 
--- a/web/package.json
+++ b/web/package.json
@@ -42,6 +42,7 @@
 		"canvas-confetti": "^1.9.3",
 		"class-variance-authority": "^0.7.1",
 		"clsx": "^2.1.1",
+		"cmdk": "^1.1.1",
 		"date-fns": "^4.1.0",
 		"embla-carousel-react": "^8.6.0",
 		"framer-motion": "^12.7.3",
--- a/web/pnpm-lock.yaml
+++ b/web/pnpm-lock.yaml
@@ -101,6 +101,9 @@ importers:
      clsx:
        specifier: ^2.1.1
        version: 2.1.1
+      cmdk:
+        specifier: ^1.1.1
+        version: 1.1.1(@types/react-dom@19.1.2(@types/react@19.1.0))(@types/react@19.1.0)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
      date-fns:
        specifier: ^4.1.0
        version: 4.1.0
@@ -157,7 +160,7 @@ importers:
        version: 3.2.0
      tailwindcss-motion:
        specifier: ^1.1.0
-        version: 1.1.0(tailwindcss@4.1.4)
+        version: 1.1.0(tailwindcss@4.1.3)
      tw-animate-css:
        specifier: ^1.2.5
        version: 1.2.5
@@ -173,13 +176,13 @@ importers:
        version: 1.9.4
      '@tailwindcss/postcss':
        specifier: ^4.1.3
-        version: 4.1.4
+        version: 4.1.3
      '@types/canvas-confetti':
        specifier: ^1.9.0
        version: 1.9.0
      '@types/node':
        specifier: ^22.14.0
-        version: 22.14.1
+        version: 22.14.0
      '@types/react':
        specifier: ^19.1.0
        version: 19.1.0
@@ -188,13 +191,13 @@ importers:
        version: 19.1.2(@types/react@19.1.0)
      tailwindcss:
        specifier: ^4.1.3
-        version: 4.1.4
+        version: 4.1.3
      typescript:
        specifier: ^5.8.3
        version: 5.8.3
      wrangler:
        specifier: ^4.12.0
-        version: 4.12.1
+        version: 4.12.0

 packages:

@@ -272,32 +275,32 @@ packages:
      workerd:
        optional: true

-  '@cloudflare/workerd-darwin-64@1.20250417.0':
-    resolution: {integrity: sha512-4Adfl92aKepjxb8e6af2d+xpD2sBOADgHqvkyXsFmoLb80weMEDDRGJi1p1m5q1M78/oVnGcpdmuRCAathanRg==}
+  '@cloudflare/workerd-darwin-64@1.20250416.0':
+    resolution: {integrity: sha512-aZgF8Swp9eVYxJPWOoZbAgAaYjWuYqGmEA+QJ2ecRGDBqm87rT4GEw7/mmLpxrpllny3VfEEhkk9iYCGv8nlFw==}
    engines: {node: '>=16'}
    cpu: [x64]
    os: [darwin]

-  '@cloudflare/workerd-darwin-arm64@1.20250417.0':
-    resolution: {integrity: sha512-dSlk18F4i3T1OTzFBxx3pKpXRMP6w2xZ26+oIV32BFWrCi/HxGzUd6gVA0q37oLGqITRt8xU693J4Gl1CwC/Ag==}
+  '@cloudflare/workerd-darwin-arm64@1.20250416.0':
+    resolution: {integrity: sha512-FhswG1QYRfaTZ4FAlUkfVWaoM2lrlqumiBTrhbo9czMJdGR/oBXS4SGynuI6zyhApHeBf3/fZpA/SBAe4cXdgg==}
    engines: {node: '>=16'}
    cpu: [arm64]
    os: [darwin]

-  '@cloudflare/workerd-linux-64@1.20250417.0':
-    resolution: {integrity: sha512-27MVzOa/lENcqewC2L9EcqstXW843UhjBMcwV1umDfsjwLyZOEv6Gtm/6j5r0L0gASvkRTam3fAmtPk/gt48TA==}
+  '@cloudflare/workerd-linux-64@1.20250416.0':
+    resolution: {integrity: sha512-G+nXEAJ/9y+A857XShwxKeRdfxok6UcjiQe6G+wQeCn/Ofkp/EWydacKdyeVU6QIm1oHS78DwJ7AzbCYywf9aw==}
    engines: {node: '>=16'}
    cpu: [x64]
    os: [linux]

-  '@cloudflare/workerd-linux-arm64@1.20250417.0':
-    resolution: {integrity: sha512-34qBk0htAXmUneOTQxW6/g6pjNVR91r0vJzz2FID84cAIOYVl4hZLijkjmVl+MMDU6boXUs+yDwhItdg06YvAg==}
+  '@cloudflare/workerd-linux-arm64@1.20250416.0':
+    resolution: {integrity: sha512-U6oVW0d9w1fpnDYNrjPJ9SFkDlGJWJWbXHlTBObXl6vccP16WewvuxyHkKqyUhUc8hyBaph7sxeKzKmuCFQ4SA==}
    engines: {node: '>=16'}
    cpu: [arm64]
    os: [linux]

-  '@cloudflare/workerd-windows-64@1.20250417.0':
-    resolution: {integrity: sha512-PDwATFioff+geVHfgTzSWsxgwjgotrdXStb0EL0lMyMT5zNmHArAnOx83CbDtud63Uv9rVX1BAfPP4tyD1O+5A==}
+  '@cloudflare/workerd-windows-64@1.20250416.0':
+    resolution: {integrity: sha512-YAjjTzL1z9YYeN4sqYfj1dtQXd2Bblj+B+hl4Rz2aOhblpZEZAdhapZlOCRvLLkOJshKJUnRD3mDlytAdgwybQ==}
    engines: {node: '>=16'}
    cpu: [x64]
    os: [win32]
@@ -1362,93 +1365,81 @@ packages:
  '@swc/helpers@0.5.15':
    resolution: {integrity: sha512-JQ5TuMi45Owi4/BIMAJBoSQoOJu12oOk/gADqlcUL9JEdHB8vyjUSsxqeNXnmXHjYKMi2WcYtezGEEhqUI/E2g==}

-  '@tailwindcss/node@4.1.4':
-    resolution: {integrity: sha512-MT5118zaiO6x6hNA04OWInuAiP1YISXql8Z+/Y8iisV5nuhM8VXlyhRuqc2PEviPszcXI66W44bCIk500Oolhw==}
+  '@tailwindcss/node@4.1.3':
+    resolution: {integrity: sha512-H/6r6IPFJkCfBJZ2dKZiPJ7Ueb2wbL592+9bQEl2r73qbX6yGnmQVIfiUvDRB2YI0a3PWDrzUwkvQx1XW1bNkA==}

-  '@tailwindcss/oxide-android-arm64@4.1.4':
-    resolution: {integrity: sha512-xMMAe/SaCN/vHfQYui3fqaBDEXMu22BVwQ33veLc8ep+DNy7CWN52L+TTG9y1K397w9nkzv+Mw+mZWISiqhmlA==}
+  '@tailwindcss/oxide-android-arm64@4.1.3':
+    resolution: {integrity: sha512-cxklKjtNLwFl3mDYw4XpEfBY+G8ssSg9ADL4Wm6//5woi3XGqlxFsnV5Zb6v07dxw1NvEX2uoqsxO/zWQsgR+g==}
    engines: {node: '>= 10'}
    cpu: [arm64]
    os: [android]

-  '@tailwindcss/oxide-darwin-arm64@4.1.4':
-    resolution: {integrity: sha512-JGRj0SYFuDuAGilWFBlshcexev2hOKfNkoX+0QTksKYq2zgF9VY/vVMq9m8IObYnLna0Xlg+ytCi2FN2rOL0Sg==}
+  '@tailwindcss/oxide-darwin-arm64@4.1.3':
+    resolution: {integrity: sha512-mqkf2tLR5VCrjBvuRDwzKNShRu99gCAVMkVsaEOFvv6cCjlEKXRecPu9DEnxp6STk5z+Vlbh1M5zY3nQCXMXhw==}
    engines: {node: '>= 10'}
    cpu: [arm64]
    os: [darwin]

-  '@tailwindcss/oxide-darwin-x64@4.1.4':
-    resolution: {integrity: sha512-sdDeLNvs3cYeWsEJ4H1DvjOzaGios4QbBTNLVLVs0XQ0V95bffT3+scptzYGPMjm7xv4+qMhCDrkHwhnUySEzA==}
+  '@tailwindcss/oxide-darwin-x64@4.1.3':
+    resolution: {integrity: sha512-7sGraGaWzXvCLyxrc7d+CCpUN3fYnkkcso3rCzwUmo/LteAl2ZGCDlGvDD8Y/1D3ngxT8KgDj1DSwOnNewKhmg==}
    engines: {node: '>= 10'}
    cpu: [x64]
    os: [darwin]

-  '@tailwindcss/oxide-freebsd-x64@4.1.4':
-    resolution: {integrity: sha512-VHxAqxqdghM83HslPhRsNhHo91McsxRJaEnShJOMu8mHmEj9Ig7ToHJtDukkuLWLzLboh2XSjq/0zO6wgvykNA==}
+  '@tailwindcss/oxide-freebsd-x64@4.1.3':
+    resolution: {integrity: sha512-E2+PbcbzIReaAYZe997wb9rId246yDkCwAakllAWSGqe6VTg9hHle67hfH6ExjpV2LSK/siRzBUs5wVff3RW9w==}
    engines: {node: '>= 10'}
    cpu: [x64]
    os: [freebsd]

-  '@tailwindcss/oxide-linux-arm-gnueabihf@4.1.4':
-    resolution: {integrity: sha512-OTU/m/eV4gQKxy9r5acuesqaymyeSCnsx1cFto/I1WhPmi5HDxX1nkzb8KYBiwkHIGg7CTfo/AcGzoXAJBxLfg==}
+  '@tailwindcss/oxide-linux-arm-gnueabihf@4.1.3':
+    resolution: {integrity: sha512-GvfbJ8wjSSjbLFFE3UYz4Eh8i4L6GiEYqCtA8j2Zd2oXriPuom/Ah/64pg/szWycQpzRnbDiJozoxFU2oJZyfg==}
    engines: {node: '>= 10'}
    cpu: [arm]
    os: [linux]

-  '@tailwindcss/oxide-linux-arm64-gnu@4.1.4':
-    resolution: {integrity: sha512-hKlLNvbmUC6z5g/J4H+Zx7f7w15whSVImokLPmP6ff1QqTVE+TxUM9PGuNsjHvkvlHUtGTdDnOvGNSEUiXI1Ww==}
+  '@tailwindcss/oxide-linux-arm64-gnu@4.1.3':
+    resolution: {integrity: sha512-35UkuCWQTeG9BHcBQXndDOrpsnt3Pj9NVIB4CgNiKmpG8GnCNXeMczkUpOoqcOhO6Cc/mM2W7kaQ/MTEENDDXg==}
    engines: {node: '>= 10'}
    cpu: [arm64]
    os: [linux]

-  '@tailwindcss/oxide-linux-arm64-musl@4.1.4':
-    resolution: {integrity: sha512-X3As2xhtgPTY/m5edUtddmZ8rCruvBvtxYLMw9OsZdH01L2gS2icsHRwxdU0dMItNfVmrBezueXZCHxVeeb7Aw==}
+  '@tailwindcss/oxide-linux-arm64-musl@4.1.3':
+    resolution: {integrity: sha512-dm18aQiML5QCj9DQo7wMbt1Z2tl3Giht54uVR87a84X8qRtuXxUqnKQkRDK5B4bCOmcZ580lF9YcoMkbDYTXHQ==}
    engines: {node: '>= 10'}
    cpu: [arm64]
    os: [linux]

-  '@tailwindcss/oxide-linux-x64-gnu@4.1.4':
-    resolution: {integrity: sha512-2VG4DqhGaDSmYIu6C4ua2vSLXnJsb/C9liej7TuSO04NK+JJJgJucDUgmX6sn7Gw3Cs5ZJ9ZLrnI0QRDOjLfNQ==}
+  '@tailwindcss/oxide-linux-x64-gnu@4.1.3':
+    resolution: {integrity: sha512-LMdTmGe/NPtGOaOfV2HuO7w07jI3cflPrVq5CXl+2O93DCewADK0uW1ORNAcfu2YxDUS035eY2W38TxrsqngxA==}
    engines: {node: '>= 10'}
    cpu: [x64]
    os: [linux]

-  '@tailwindcss/oxide-linux-x64-musl@4.1.4':
-    resolution: {integrity: sha512-v+mxVgH2kmur/X5Mdrz9m7TsoVjbdYQT0b4Z+dr+I4RvreCNXyCFELZL/DO0M1RsidZTrm6O1eMnV6zlgEzTMQ==}
+  '@tailwindcss/oxide-linux-x64-musl@4.1.3':
+    resolution: {integrity: sha512-aalNWwIi54bbFEizwl1/XpmdDrOaCjRFQRgtbv9slWjmNPuJJTIKPHf5/XXDARc9CneW9FkSTqTbyvNecYAEGw==}
    engines: {node: '>= 10'}
    cpu: [x64]
    os: [linux]

-  '@tailwindcss/oxide-wasm32-wasi@4.1.4':
-    resolution: {integrity: sha512-2TLe9ir+9esCf6Wm+lLWTMbgklIjiF0pbmDnwmhR9MksVOq+e8aP3TSsXySnBDDvTTVd/vKu1aNttEGj3P6l8Q==}
-    engines: {node: '>=14.0.0'}
-    cpu: [wasm32]
-    bundledDependencies:
-      - '@napi-rs/wasm-runtime'
-      - '@emnapi/core'
-      - '@emnapi/runtime'
-      - '@tybys/wasm-util'
-      - '@emnapi/wasi-threads'
-      - tslib
-
-  '@tailwindcss/oxide-win32-arm64-msvc@4.1.4':
-    resolution: {integrity: sha512-VlnhfilPlO0ltxW9/BgfLI5547PYzqBMPIzRrk4W7uupgCt8z6Trw/tAj6QUtF2om+1MH281Pg+HHUJoLesmng==}
+  '@tailwindcss/oxide-win32-arm64-msvc@4.1.3':
+    resolution: {integrity: sha512-PEj7XR4OGTGoboTIAdXicKuWl4EQIjKHKuR+bFy9oYN7CFZo0eu74+70O4XuERX4yjqVZGAkCdglBODlgqcCXg==}
    engines: {node: '>= 10'}
    cpu: [arm64]
    os: [win32]

-  '@tailwindcss/oxide-win32-x64-msvc@4.1.4':
-    resolution: {integrity: sha512-+7S63t5zhYjslUGb8NcgLpFXD+Kq1F/zt5Xv5qTv7HaFTG/DHyHD9GA6ieNAxhgyA4IcKa/zy7Xx4Oad2/wuhw==}
+  '@tailwindcss/oxide-win32-x64-msvc@4.1.3':
+    resolution: {integrity: sha512-T8gfxECWDBENotpw3HR9SmNiHC9AOJdxs+woasRZ8Q/J4VHN0OMs7F+4yVNZ9EVN26Wv6mZbK0jv7eHYuLJLwA==}
    engines: {node: '>= 10'}
    cpu: [x64]
    os: [win32]

-  '@tailwindcss/oxide@4.1.4':
-    resolution: {integrity: sha512-p5wOpXyOJx7mKh5MXh5oKk+kqcz8T+bA3z/5VWWeQwFrmuBItGwz8Y2CHk/sJ+dNb9B0nYFfn0rj/cKHZyjahQ==}
+  '@tailwindcss/oxide@4.1.3':
+    resolution: {integrity: sha512-t16lpHCU7LBxDe/8dCj9ntyNpXaSTAgxWm1u2XQP5NiIu4KGSyrDJJRlK9hJ4U9yJxx0UKCVI67MJWFNll5mOQ==}
    engines: {node: '>= 10'}

-  '@tailwindcss/postcss@4.1.4':
-    resolution: {integrity: sha512-bjV6sqycCEa+AQSt2Kr7wpGF1bOZJ5wsqnLEkqSbM/JEHxx/yhMH8wHmdkPyApF9xhHeMSwnnkDUUMMM/hYnXw==}
+  '@tailwindcss/postcss@4.1.3':
+    resolution: {integrity: sha512-6s5nJODm98F++QT49qn8xJKHQRamhYHfMi3X7/ltxiSQ9dyRsaFSfFkfaMsanWzf+TMYQtbk8mt5f6cCVXJwfg==}

  '@tanstack/react-virtual@3.13.6':
    resolution: {integrity: sha512-WT7nWs8ximoQ0CDx/ngoFP7HbQF9Q2wQe4nh2NB+u2486eX3nZRE40P9g6ccCVq7ZfTSH5gFOuCoVH5DLNS/aA==}
@@ -1489,8 +1480,8 @@ packages:
  '@types/d3-timer@3.0.2':
    resolution: {integrity: sha512-Ps3T8E8dZDam6fUyNiMkekK3XUsaUEik+idO9/YjPtfj2qruF8tFBXS7XhtE4iIXBLxhmLjP3SXpLhVf21I9Lw==}

-  '@types/node@22.14.1':
-    resolution: {integrity: sha512-u0HuPQwe/dHrItgHHpmw3N2fYCR6x4ivMNbPHRkBVP4CvN+kiRrKHWk3i8tXiO/joPwXLMYvF9TTF0eqgHIuOw==}
+  '@types/node@22.14.0':
+    resolution: {integrity: sha512-Kmpl+z84ILoG+3T/zQFyAJsU6EPTmOCj8/2+83fSN6djd6I4o7uOuGIH6vq3PrjY5BGitSbFuMN18j3iknubbA==}

  '@types/react-dom@19.1.2':
    resolution: {integrity: sha512-XGJkWF41Qq305SKWEILa1O8vzhb3aOo3ogBlSmiqNko/WmRb6QIaweuZCXjKygVDXpzXb5wyxKTSOsmkuqj+Qw==}
@@ -1549,6 +1540,12 @@ packages:
    resolution: {integrity: sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==}
    engines: {node: '>=6'}

+  cmdk@1.1.1:
+    resolution: {integrity: sha512-Vsv7kFaXm+ptHDMZ7izaRsP70GgrW9NBNGswt9OZaVBLlE0SNpDq8eu/VGXyF9r7M0azK3Wy7OlYXsuyYLFzHg==}
+    peerDependencies:
+      react: ^18 || ^19 || ^19.0.0-rc
+      react-dom: ^18 || ^19 || ^19.0.0-rc
+
  color-convert@2.0.1:
    resolution: {integrity: sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==}
    engines: {node: '>=7.0.0'}
@@ -1891,8 +1888,8 @@ packages:
    engines: {node: '>=10.0.0'}
    hasBin: true

-  miniflare@4.20250417.0:
-    resolution: {integrity: sha512-bROKLQKr4CoS93tnGuw5e08VaNwM3VowTL3Z2Cps1HzY6a4Bq8uNtggQ7WogriMq77jcHn6kbz64bvWyF//Jkw==}
+  miniflare@4.20250416.0:
+    resolution: {integrity: sha512-261PhPgD9zs5/BTdbWqwiaXtWxb+Av5zKCwTU+HXrA5E4tf3qnULwh3u6SVUOAEArEroFuKJzawsQ9COtNBurQ==}
    engines: {node: '>=18.0.0'}
    hasBin: true

@@ -2156,8 +2153,8 @@ packages:
    peerDependencies:
      tailwindcss: '>=3.0.0 || insiders'

-  tailwindcss@4.1.4:
-    resolution: {integrity: sha512-1ZIUqtPITFbv/DxRmDr5/agPqJwF69d24m9qmM1939TJehgY539CtzeZRjbLt5G6fSy/7YqqYsfvoTEw9xUI2A==}
+  tailwindcss@4.1.3:
+    resolution: {integrity: sha512-2Q+rw9vy1WFXu5cIxlvsabCwhU2qUwodGq03ODhLJ0jW4ek5BUtoCsnLB0qG+m8AHgEsSJcJGDSDe06FXlP74g==}

  tapable@2.2.1:
    resolution: {integrity: sha512-GNzQvQTOIP6RyTfE2Qxb8ZVlNmw0n88vp1szwWRimP02mnTsx3Wtn5qRdqY9w2XduFNUgvOwhNnQsjwCp+kqaQ==}
@@ -2222,17 +2219,17 @@ packages:
  web-vitals@4.2.4:
    resolution: {integrity: sha512-r4DIlprAGwJ7YM11VZp4R884m0Vmgr6EAKe3P+kO0PPj3Unqyvv59rczf6UiGcb9Z8QxZVcqKNwv/g0WNdWwsw==}

-  workerd@1.20250417.0:
-    resolution: {integrity: sha512-naz6oJiVODd3/Lkp9l3vtc56HKOOvx+AWDvEsTa5eSfi5SI9V0HYpLYSPblAwrfazbQ4ff1Vl3jkTl/5JxqCAA==}
+  workerd@1.20250416.0:
+    resolution: {integrity: sha512-Yrx/bZAKbmSvomdTAzzIpOHwpYhs0ldr2wqed22UEhQ0mIplAHY4xmY+SjAJhP/TydZrciOVzBxwM1+4T40KNA==}
    engines: {node: '>=16'}
    hasBin: true

-  wrangler@4.12.1:
-    resolution: {integrity: sha512-jYrz8y2ffhsRqvQLO2dXFi9HLvPUJk3jn7U71GWfBBCHm0I6r2ik7Vs9ajpRcTGlbNw1RY0uIHVJBVR/7bEN5A==}
+  wrangler@4.12.0:
+    resolution: {integrity: sha512-4rfAXOi5KqM3ECvOrZJ97k3zEqxVwtdt4bijd8jcRBZ6iJYvEtjgjVi4TsfkVa/eXGhpfHTUnKu2uk8UHa8M2w==}
    engines: {node: '>=18.0.0'}
    hasBin: true
    peerDependencies:
-      '@cloudflare/workers-types': ^4.20250417.0
+      '@cloudflare/workers-types': ^4.20250415.0
    peerDependenciesMeta:
      '@cloudflare/workers-types':
        optional: true
@@ -2305,25 +2302,25 @@ snapshots:
    dependencies:
      mime: 3.0.0

-  '@cloudflare/unenv-preset@2.3.1(unenv@2.0.0-rc.15)(workerd@1.20250417.0)':
+  '@cloudflare/unenv-preset@2.3.1(unenv@2.0.0-rc.15)(workerd@1.20250416.0)':
    dependencies:
      unenv: 2.0.0-rc.15
    optionalDependencies:
-      workerd: 1.20250417.0
+      workerd: 1.20250416.0

-  '@cloudflare/workerd-darwin-64@1.20250417.0':
+  '@cloudflare/workerd-darwin-64@1.20250416.0':
    optional: true

-  '@cloudflare/workerd-darwin-arm64@1.20250417.0':
+  '@cloudflare/workerd-darwin-arm64@1.20250416.0':
    optional: true

-  '@cloudflare/workerd-linux-64@1.20250417.0':
+  '@cloudflare/workerd-linux-64@1.20250416.0':
    optional: true

-  '@cloudflare/workerd-linux-arm64@1.20250417.0':
+  '@cloudflare/workerd-linux-arm64@1.20250416.0':
    optional: true

-  '@cloudflare/workerd-windows-64@1.20250417.0':
+  '@cloudflare/workerd-windows-64@1.20250416.0':
    optional: true

  '@cspotcode/source-map-support@0.8.1':
@@ -3267,71 +3264,67 @@ snapshots:
    dependencies:
      tslib: 2.8.1

-  '@tailwindcss/node@4.1.4':
+  '@tailwindcss/node@4.1.3':
    dependencies:
      enhanced-resolve: 5.18.1
      jiti: 2.4.2
      lightningcss: 1.29.2
-      tailwindcss: 4.1.4
+      tailwindcss: 4.1.3

-  '@tailwindcss/oxide-android-arm64@4.1.4':
+  '@tailwindcss/oxide-android-arm64@4.1.3':
    optional: true

-  '@tailwindcss/oxide-darwin-arm64@4.1.4':
+  '@tailwindcss/oxide-darwin-arm64@4.1.3':
    optional: true

-  '@tailwindcss/oxide-darwin-x64@4.1.4':
+  '@tailwindcss/oxide-darwin-x64@4.1.3':
    optional: true

-  '@tailwindcss/oxide-freebsd-x64@4.1.4':
+  '@tailwindcss/oxide-freebsd-x64@4.1.3':
    optional: true

-  '@tailwindcss/oxide-linux-arm-gnueabihf@4.1.4':
+  '@tailwindcss/oxide-linux-arm-gnueabihf@4.1.3':
    optional: true

-  '@tailwindcss/oxide-linux-arm64-gnu@4.1.4':
+  '@tailwindcss/oxide-linux-arm64-gnu@4.1.3':
    optional: true

-  '@tailwindcss/oxide-linux-arm64-musl@4.1.4':
+  '@tailwindcss/oxide-linux-arm64-musl@4.1.3':
    optional: true

-  '@tailwindcss/oxide-linux-x64-gnu@4.1.4':
+  '@tailwindcss/oxide-linux-x64-gnu@4.1.3':
    optional: true

-  '@tailwindcss/oxide-linux-x64-musl@4.1.4':
+  '@tailwindcss/oxide-linux-x64-musl@4.1.3':
    optional: true

-  '@tailwindcss/oxide-wasm32-wasi@4.1.4':
+  '@tailwindcss/oxide-win32-arm64-msvc@4.1.3':
    optional: true

-  '@tailwindcss/oxide-win32-arm64-msvc@4.1.4':
+  '@tailwindcss/oxide-win32-x64-msvc@4.1.3':
    optional: true

-  '@tailwindcss/oxide-win32-x64-msvc@4.1.4':
-    optional: true
-
-  '@tailwindcss/oxide@4.1.4':
+  '@tailwindcss/oxide@4.1.3':
    optionalDependencies:
-      '@tailwindcss/oxide-android-arm64': 4.1.4
-      '@tailwindcss/oxide-darwin-arm64': 4.1.4
-      '@tailwindcss/oxide-darwin-x64': 4.1.4
-      '@tailwindcss/oxide-freebsd-x64': 4.1.4
-      '@tailwindcss/oxide-linux-arm-gnueabihf': 4.1.4
-      '@tailwindcss/oxide-linux-arm64-gnu': 4.1.4
-      '@tailwindcss/oxide-linux-arm64-musl': 4.1.4
-      '@tailwindcss/oxide-linux-x64-gnu': 4.1.4
-      '@tailwindcss/oxide-linux-x64-musl': 4.1.4
-      '@tailwindcss/oxide-wasm32-wasi': 4.1.4
-      '@tailwindcss/oxide-win32-arm64-msvc': 4.1.4
-      '@tailwindcss/oxide-win32-x64-msvc': 4.1.4
+      '@tailwindcss/oxide-android-arm64': 4.1.3
+      '@tailwindcss/oxide-darwin-arm64': 4.1.3
+      '@tailwindcss/oxide-darwin-x64': 4.1.3
+      '@tailwindcss/oxide-freebsd-x64': 4.1.3
+      '@tailwindcss/oxide-linux-arm-gnueabihf': 4.1.3
+      '@tailwindcss/oxide-linux-arm64-gnu': 4.1.3
+      '@tailwindcss/oxide-linux-arm64-musl': 4.1.3
+      '@tailwindcss/oxide-linux-x64-gnu': 4.1.3
+      '@tailwindcss/oxide-linux-x64-musl': 4.1.3
+      '@tailwindcss/oxide-win32-arm64-msvc': 4.1.3
+      '@tailwindcss/oxide-win32-x64-msvc': 4.1.3

-  '@tailwindcss/postcss@4.1.4':
+  '@tailwindcss/postcss@4.1.3':
    dependencies:
      '@alloc/quick-lru': 5.2.0
-      '@tailwindcss/node': 4.1.4
-      '@tailwindcss/oxide': 4.1.4
+      '@tailwindcss/node': 4.1.3
+      '@tailwindcss/oxide': 4.1.3
      postcss: 8.5.3
-      tailwindcss: 4.1.4
+      tailwindcss: 4.1.3

  '@tanstack/react-virtual@3.13.6(react-dom@19.1.0(react@19.1.0))(react@19.1.0)':
    dependencies:
@@ -3367,7 +3360,7 @@ snapshots:

  '@types/d3-timer@3.0.2': {}

-  '@types/node@22.14.1':
+  '@types/node@22.14.0':
    dependencies:
      undici-types: 6.21.0

@@ -3424,6 +3417,18 @@ snapshots:

  clsx@2.1.1: {}

+  cmdk@1.1.1(@types/react-dom@19.1.2(@types/react@19.1.0))(@types/react@19.1.0)(react-dom@19.1.0(react@19.1.0))(react@19.1.0):
+    dependencies:
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.1.0)(react@19.1.0)
+      '@radix-ui/react-dialog': 1.1.7(@types/react-dom@19.1.2(@types/react@19.1.0))(@types/react@19.1.0)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
+      '@radix-ui/react-id': 1.1.1(@types/react@19.1.0)(react@19.1.0)
+      '@radix-ui/react-primitive': 2.0.3(@types/react-dom@19.1.2(@types/react@19.1.0))(@types/react@19.1.0)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
+      react: 19.1.0
+      react-dom: 19.1.0(react@19.1.0)
+    transitivePeerDependencies:
+      - '@types/react'
+      - '@types/react-dom'
+
  color-convert@2.0.1:
    dependencies:
      color-name: 1.1.4
@@ -3730,7 +3735,7 @@ snapshots:

  mime@3.0.0: {}

-  miniflare@4.20250417.0:
+  miniflare@4.20250416.0:
    dependencies:
      '@cspotcode/source-map-support': 0.8.1
      acorn: 8.14.0
@@ -3739,7 +3744,7 @@ snapshots:
      glob-to-regexp: 0.4.1
      stoppable: 1.1.0
      undici: 5.29.0
-      workerd: 1.20250417.0
+      workerd: 1.20250416.0
      ws: 8.18.0
      youch: 3.3.4
      zod: 3.22.3
@@ -4020,11 +4025,11 @@ snapshots:

  tailwind-merge@3.2.0: {}

-  tailwindcss-motion@1.1.0(tailwindcss@4.1.4):
+  tailwindcss-motion@1.1.0(tailwindcss@4.1.3):
    dependencies:
-      tailwindcss: 4.1.4
+      tailwindcss: 4.1.3

-  tailwindcss@4.1.4: {}
+  tailwindcss@4.1.3: {}

  tapable@2.2.1: {}

@@ -4095,24 +4100,24 @@ snapshots:

  web-vitals@4.2.4: {}

-  workerd@1.20250417.0:
+  workerd@1.20250416.0:
    optionalDependencies:
-      '@cloudflare/workerd-darwin-64': 1.20250417.0
-      '@cloudflare/workerd-darwin-arm64': 1.20250417.0
-      '@cloudflare/workerd-linux-64': 1.20250417.0
-      '@cloudflare/workerd-linux-arm64': 1.20250417.0
-      '@cloudflare/workerd-windows-64': 1.20250417.0
+      '@cloudflare/workerd-darwin-64': 1.20250416.0
+      '@cloudflare/workerd-darwin-arm64': 1.20250416.0
+      '@cloudflare/workerd-linux-64': 1.20250416.0
+      '@cloudflare/workerd-linux-arm64': 1.20250416.0
+      '@cloudflare/workerd-windows-64': 1.20250416.0

-  wrangler@4.12.1:
+  wrangler@4.12.0:
    dependencies:
      '@cloudflare/kv-asset-handler': 0.4.0
-      '@cloudflare/unenv-preset': 2.3.1(unenv@2.0.0-rc.15)(workerd@1.20250417.0)
+      '@cloudflare/unenv-preset': 2.3.1(unenv@2.0.0-rc.15)(workerd@1.20250416.0)
      blake3-wasm: 2.1.5
      esbuild: 0.25.2
-      miniflare: 4.20250417.0
+      miniflare: 4.20250416.0
      path-to-regexp: 6.3.0
      unenv: 2.0.0-rc.15
-      workerd: 1.20250417.0
+      workerd: 1.20250416.0
    optionalDependencies:
      fsevents: 2.3.3
      sharp: 0.33.5
--- a/web/src/app/error.tsx
+++ b/web/src/app/error.tsx
@@ -32,16 +32,16 @@ export default function ErrorPage({
 				</div>
 				<h1 className="text-2xl font-bold">Something went wrong</h1>
 				<p className="text-muted-foreground">
-					Unable to load this page. We're looking into the issue.
+					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" />
-						Retry
+						Try again
 					</Button>
 					<Button onClick={handleGoBack} className="cursor-pointer">
 						<ArrowLeft className="mr-2 h-4 w-4" />
-						Back
+						Go back
 					</Button>
 				</div>
 				{error.digest && <p className="text-xs text-muted-foreground mt-6">Error ID: {error.digest}</p>}
--- a/web/src/app/globals.css
+++ b/web/src/app/globals.css
@@ -118,6 +118,19 @@
 			transform: rotate(-5deg) scale(0.9);
 		}
 	}
+
+	--animate-shiny-text: shiny-text 8s infinite;
+	@keyframes shiny-text {
+		0%,
+		90%,
+		100% {
+			background-position: calc(-100% - var(--shiny-width)) 0;
+		}
+		30%,
+		60% {
+			background-position: calc(100% + var(--shiny-width)) 0;
+		}
+	}
 }

 :root {
@@ -186,7 +199,7 @@
 	--secondary: oklch(0.31 0.03 266.71);
 	--secondary-foreground: oklch(0.92 0 0);
 	--muted: oklch(0.31 0.03 266.71);
-	--muted-foreground: oklch(0.78 0 0);
+	--muted-foreground: oklch(0.72 0 0);
 	--accent: oklch(0.34 0.06 267.59);
 	--accent-foreground: oklch(0.88 0.06 254.13);
 	--destructive: oklch(0.64 0.21 25.33);
--- a/web/src/app/icons/[icon]/opengraph-image.tsx
+++ b/web/src/app/icons/[icon]/opengraph-image.tsx
@@ -2,12 +2,6 @@ import { readFile } from "node:fs/promises"
 import { join } from "node:path"
 import { getAllIcons } from "@/lib/api"
 import { ImageResponse } from "next/og"
-import {
-	SITE_NAME,
-	SITE_TAGLINE,
-	getIconDescription,
-	WEB_URL
-} from "@/constants"

 export const dynamic = "force-static"

@@ -58,9 +52,9 @@ export default async function Image({ params }: { params: { icon: string } }) {
 				position: "relative",
 				fontFamily: "Inter, system-ui, sans-serif",
 				overflow: "hidden",
-				backgroundColor: "#0f172a", // Dark background (slate-900)
+				backgroundColor: "white",
 				backgroundImage:
-					"radial-gradient(circle at 25px 25px, #1e293b 2%, transparent 0%), radial-gradient(circle at 75px 75px, #1e293b 2%, transparent 0%)",
+					"radial-gradient(circle at 25px 25px, lightgray 2%, transparent 0%), radial-gradient(circle at 75px 75px, lightgray 2%, transparent 0%)",
 				backgroundSize: "100px 100px",
 			}}
 		>
@@ -73,7 +67,7 @@ export default async function Image({ params }: { params: { icon: string } }) {
 					width: 400,
 					height: 400,
 					borderRadius: "50%",
-					background: "linear-gradient(135deg, rgba(56, 189, 248, 0.15) 0%, rgba(59, 130, 246, 0.15) 100%)",
+					background: "linear-gradient(135deg, rgba(56, 189, 248, 0.1) 0%, rgba(59, 130, 246, 0.1) 100%)",
 					filter: "blur(80px)",
 					zIndex: 2,
 				}}
@@ -86,7 +80,7 @@ export default async function Image({ params }: { params: { icon: string } }) {
 					width: 500,
 					height: 500,
 					borderRadius: "50%",
-					background: "linear-gradient(135deg, rgba(249, 115, 22, 0.15) 0%, rgba(234, 88, 12, 0.15) 100%)",
+					background: "linear-gradient(135deg, rgba(249, 115, 22, 0.1) 0%, rgba(234, 88, 12, 0.1) 100%)",
 					filter: "blur(100px)",
 					zIndex: 2,
 				}}
@@ -115,8 +109,8 @@ export default async function Image({ params }: { params: { icon: string } }) {
 						width: 320,
 						height: 320,
 						borderRadius: 32,
-						background: "#1e293b", // Dark container (slate-800)
-						boxShadow: "0 25px 50px -12px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.1)",
+						background: "white",
+						boxShadow: "0 25px 50px -12px rgba(0, 0, 0, 0.15), 0 0 0 1px rgba(0, 0, 0, 0.05)",
 						padding: 30,
 						flexShrink: 0,
 						position: "relative",
@@ -127,7 +121,7 @@ export default async function Image({ params }: { params: { icon: string } }) {
 						style={{
 							position: "absolute",
 							inset: 0,
-							background: "linear-gradient(145deg, #1e293b 0%, #0f172a 100%)",
+							background: "linear-gradient(145deg, #ffffff 0%, #f8fafc 100%)",
 							zIndex: 0,
 						}}
 					/>
@@ -140,7 +134,7 @@ export default async function Image({ params }: { params: { icon: string } }) {
 							objectFit: "contain",
 							position: "relative",
 							zIndex: 1,
-							filter: "drop-shadow(0 10px 15px rgba(0, 0, 0, 0.3))",
+							filter: "drop-shadow(0 10px 15px rgba(0, 0, 0, 0.1))",
 						}}
 					/>
 				</div>
@@ -160,7 +154,7 @@ export default async function Image({ params }: { params: { icon: string } }) {
 							display: "flex",
 							fontSize: 64,
 							fontWeight: 800,
-							color: "#f8fafc", // Light text for dark background (slate-50)
+							color: "#0f172a",
 							lineHeight: 1.1,
 							letterSpacing: "-0.02em",
 						}}
@@ -173,14 +167,14 @@ export default async function Image({ params }: { params: { icon: string } }) {
 							display: "flex",
 							fontSize: 32,
 							fontWeight: 500,
-							color: "#94a3b8", // Muted text (slate-400)
+							color: "#64748b",
 							lineHeight: 1.4,
 							position: "relative",
 							paddingLeft: 16,
-							borderLeft: "4px solid #64748b", // slate-500
+							borderLeft: "4px solid #94a3b8",
 						}}
 					>
-						{getIconDescription(formattedIconName, totalIcons)}
+						Amongst {totalIcons} other high-quality dashboard icons
 					</div>

 					<div
@@ -197,14 +191,14 @@ export default async function Image({ params }: { params: { icon: string } }) {
 									display: "flex",
 									alignItems: "center",
 									justifyContent: "center",
-									backgroundColor: "#334155", // slate-700
-									color: "#e2e8f0", // slate-200
-									border: "2px solid #475569", // slate-600
+									backgroundColor: "#f1f5f9",
+									color: "#475569",
+									border: "2px solid #e2e8f0",
 									borderRadius: 12,
 									padding: "8px 16px",
 									fontSize: 18,
 									fontWeight: 600,
-									boxShadow: "0 1px 2px rgba(0, 0, 0, 0.2)",
+									boxShadow: "0 1px 2px rgba(0, 0, 0, 0.05)",
 								}}
 							>
 								{format}
@@ -225,8 +219,8 @@ export default async function Image({ params }: { params: { icon: string } }) {
 					display: "flex",
 					alignItems: "center",
 					justifyContent: "center",
-					background: "#1e293b", // slate-800
-					borderTop: "2px solid rgba(255, 255, 255, 0.1)",
+					background: "#ffffff",
+					borderTop: "2px solid rgba(0, 0, 0, 0.05)",
 					zIndex: 20,
 				}}
 			>
@@ -235,7 +229,7 @@ export default async function Image({ params }: { params: { icon: string } }) {
 						display: "flex",
 						fontSize: 24,
 						fontWeight: 600,
-						color: "#e2e8f0", // slate-200
+						color: "#334155",
 						alignItems: "center",
 						gap: 10,
 					}}
@@ -245,11 +239,11 @@ export default async function Image({ params }: { params: { icon: string } }) {
 							width: 8,
 							height: 8,
 							borderRadius: "50%",
-							backgroundColor: "#3b82f6", // blue-500
+							backgroundColor: "#3b82f6",
 							marginRight: 4,
 						}}
 					/>
-					{WEB_URL.replace("https://", "")}
+					dashboardicons.com
 				</div>
 			</div>
 		</div>,
--- a/web/src/app/icons/[icon]/page.tsx
+++ b/web/src/app/icons/[icon]/page.tsx
@@ -1,9 +1,7 @@
 import { IconDetails } from "@/components/icon-details"
-import { StructuredData } from "@/components/structured-data"
-import { BASE_URL, GITHUB_URL, ICON_DETAIL_KEYWORDS, SITE_NAME, SITE_TAGLINE, TITLE_SEPARATOR, WEB_URL, getIconDescription, getIconSchema } from "@/constants"
+import { BASE_URL, WEB_URL } from "@/constants"
 import { getAllIcons, getAuthorData } from "@/lib/api"
 import type { Metadata, ResolvingMetadata } from "next"
-import Script from "next/script"
 import { notFound } from "next/navigation"

 export const dynamicParams = false
@@ -42,39 +40,41 @@ export async function generateMetadata({ params, searchParams }: Props, parent:
 		.map((word) => word.charAt(0).toUpperCase() + word.slice(1))
 		.join(" ")

-	const title = `${formattedIconName} Icon ${TITLE_SEPARATOR} ${SITE_NAME}`
-	const fullTitle = `${formattedIconName} Icon ${TITLE_SEPARATOR} ${SITE_NAME} ${TITLE_SEPARATOR} ${SITE_TAGLINE}`
-	const description = getIconDescription(formattedIconName, totalIcons)
-
 	return {
-		title,
-		description,
+		title: `${formattedIconName} Icon | Dashboard Icons`,
+		description: `Download the ${formattedIconName} icon in SVG, PNG, and WEBP formats for FREE. Part of a collection of ${totalIcons} curated icons for services, applications and tools, designed specifically for dashboards and app directories.`,
 		assets: [iconImageUrl],
-		category: "Icons",
-		keywords: ICON_DETAIL_KEYWORDS(formattedIconName),
+		keywords: [
+			`${formattedIconName} icon`,
+			`${formattedIconName} icon download`,
+			`${formattedIconName} icon svg`,
+			`${formattedIconName} icon png`,
+			`${formattedIconName} icon webp`,
+			`${icon} icon`,
+			"application icon",
+			"tool icon",
+			"web dashboard",
+			"app directory",
+		],
 		icons: {
 			icon: iconImageUrl,
 		},
-		abstract: description,
-		robots: {
-			index: true,
-			follow: true,
-		},
+		abstract: `Download the ${formattedIconName} icon in SVG, PNG, and WEBP formats for FREE. Part of a collection of ${totalIcons} curated icons for services, applications and tools, designed specifically for dashboards and app directories.`,
 		openGraph: {
-			title: fullTitle,
-			description,
+			title: `${formattedIconName} Icon | Dashboard Icons`,
+			description: `Download the ${formattedIconName} icon in SVG, PNG, and WEBP formats for FREE. Part of a collection of ${totalIcons} curated icons for services, applications and tools, designed specifically for dashboards and app directories.`,
 			type: "article",
 			url: pageUrl,
 			authors: [authorName],
 			publishedTime: updateDate.toISOString(),
 			modifiedTime: updateDate.toISOString(),
 			section: "Icons",
-			tags: [formattedIconName, ...ICON_DETAIL_KEYWORDS(formattedIconName)],
+			tags: [formattedIconName, "dashboard icon", "service icon", "application icon", "tool icon", "web dashboard", "app directory"],
 		},
 		twitter: {
 			card: "summary_large_image",
-			title: fullTitle,
-			description,
+			title: `${formattedIconName} Icon | Dashboard Icons`,
+			description: `Download the ${formattedIconName} icon in SVG, PNG, and WEBP formats for FREE. Part of a collection of ${totalIcons} curated icons for services, applications and tools, designed specifically for dashboards and app directories.`,
 			images: [iconImageUrl],
 		},
 		alternates: {
@@ -85,9 +85,6 @@ export async function generateMetadata({ params, searchParams }: Props, parent:
 				webp: `${BASE_URL}/webp/${icon}.webp`,
 			},
 		},
-		other: {
-			"revisit-after": "7 days",
-		}
 	}
 }

@@ -101,26 +98,6 @@ export default async function IconPage({ params }: { params: Promise<{ icon: str
 	}

 	const authorData = await getAuthorData(originalIconData.update.author.id)
-	const updateDate = new Date(originalIconData.update.timestamp)
-	const authorName = authorData.name || authorData.login
-	const formattedIconName = icon
-		.split("-")
-		.map((word) => word.charAt(0).toUpperCase() + word.slice(1))
-		.join(" ")

-	const imageSchema = getIconSchema(
-		formattedIconName,
-		icon,
-		authorName,
-		authorData.html_url,
-		updateDate.toISOString(),
-		Object.keys(iconsData).length
-	)
-
-	return (
-		<>
-			<StructuredData data={imageSchema} id="image-schema" />
-			<IconDetails icon={icon} iconData={originalIconData} authorData={authorData} />
-		</>
-	)
+	return <IconDetails icon={icon} iconData={originalIconData} authorData={authorData} />
 }
--- a/web/src/app/icons/components.tsx
+++ b/web/src/app/icons/components.tsx
@@ -0,0 +1,87 @@
+"use client"
+
+import { Input } from "@/components/ui/input"
+import { BASE_URL } from "@/constants"
+import type { IconSearchProps, IconWithName } from "@/types/icons"
+import { Search } from "lucide-react"
+import Image from "next/image"
+import Link from "next/link"
+import { useState } from "react"
+
+export function IconSearch({ icons, initialQuery = "" }: IconSearchProps) {
+	const [searchQuery, setSearchQuery] = useState(initialQuery)
+	const [filteredIcons, setFilteredIcons] = useState<IconWithName[]>(() => {
+		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
+
+			return false
+		})
+	})
+
+	const handleSearch = (query: string) => {
+		setSearchQuery(query)
+
+		if (!query.trim()) {
+			setFilteredIcons(icons)
+			return
+		}
+
+		const q = query.toLowerCase()
+		const filtered = 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
+
+			return false
+		})
+
+		setFilteredIcons(filtered)
+	}
+
+	return (
+		<>
+			<div className="relative w-full max-w-md">
+				<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 transition-all duration-300 text-sm md:text-base"
+					value={searchQuery}
+					onChange={(e) => handleSearch(e.target.value)}
+				/>
+			</div>
+
+			{filteredIcons.length === 0 ? (
+				<div className="text-center py-12">
+					<h2 className="text-xl font-semibold">No icons found</h2>
+					<p className="text-muted-foreground mt-2">Try a different search term.</p>
+				</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 }) => (
+						<Link
+							key={name}
+							href={`/icons/${name}`}
+							className="group flex flex-col items-center p-4 rounded-lg border border-border hover:border-primary hover:bg-accent transition-colors"
+						>
+							<div className="relative h-16 w-16 mb-2">
+								<Image
+									src={`${BASE_URL}/${data.base}/${name}.${data.base}`}
+									alt={`${name} icon`}
+									fill
+									className="object-contain p-1 group-hover:scale-110 transition-transform"
+								/>
+							</div>
+							<span className="text-sm text-center truncate w-full">{name.replace(/-/g, " ")}</span>
+						</Link>
+					))}
+				</div>
+			)}
+		</>
+	)
+}
--- a/web/src/app/icons/components/icon-search.tsx
+++ b/web/src/app/icons/components/icon-search.tsx
@@ -19,6 +19,7 @@ import { Input } from "@/components/ui/input"
 import { Separator } from "@/components/ui/separator"
 import { BASE_URL } from "@/constants"
 import type { Icon, IconSearchProps } from "@/types/icons"
+import { AnimatePresence, motion } from "framer-motion"
 import { ArrowDownAZ, ArrowUpZA, Calendar, ChevronLeft, ChevronRight, Filter, Search, SortAsc, X } from "lucide-react"
 import { useTheme } from "next-themes"
 import Image from "next/image"
@@ -27,31 +28,33 @@ import { usePathname, useRouter, useSearchParams } from "next/navigation"
 import posthog from "posthog-js"
 import { useCallback, useEffect, useMemo, useRef, useState } from "react"
 import { toast } from "sonner"
-import { motion, AnimatePresence } from "framer-motion"

 type SortOption = "relevance" | "alphabetical-asc" | "alphabetical-desc" | "newest"

 // Get the display rows count based on viewport size
 function getDefaultRowsPerPage() {
-	if (typeof window === "undefined") return 3; // Default for SSR
+	if (typeof window === "undefined") return 3 // Default for SSR

 	// Calculate based on viewport height and width
-	const vh = window.innerHeight;
-	const vw = window.innerWidth;
+	const vh = window.innerHeight
+	const vw = window.innerWidth

 	// Determine number of columns based on viewport width
-	let columns = 2; // Default for small screens (sm)
-	if (vw >= 1280) columns = 8; // xl breakpoint
-	else if (vw >= 1024) columns = 6; // lg breakpoint
-	else if (vw >= 768) columns = 4; // md breakpoint
-	else if (vw >= 640) columns = 3; // sm breakpoint
+	let columns = 2 // Default for small screens (sm)
+	if (vw >= 1280)
+		columns = 8 // xl breakpoint
+	else if (vw >= 1024)
+		columns = 6 // lg breakpoint
+	else if (vw >= 768)
+		columns = 4 // md breakpoint
+	else if (vw >= 640) columns = 3 // sm breakpoint

 	// Calculate rows (accounting for pagination UI space)
-	const rowHeight = 130; // Approximate height of each row in pixels
-	const availableHeight = vh * 0.6; // 60% of viewport height
+	const rowHeight = 130 // Approximate height of each row in pixels
+	const availableHeight = vh * 0.6 // 60% of viewport height

 	// Ensure at least 1 row, maximum 5 rows
-	return Math.max(1, Math.min(5, Math.floor(availableHeight / rowHeight)));
+	return Math.max(1, Math.min(5, Math.floor(availableHeight / rowHeight)))
 }

 export function IconSearch({ icons }: IconSearchProps) {
@@ -75,33 +78,36 @@ export function IconSearch({ icons }: IconSearchProps) {
 	// Add resize observer to update iconsPerPage when window size changes
 	useEffect(() => {
 		const updateIconsPerPage = () => {
-			const rows = getDefaultRowsPerPage();
+			const rows = getDefaultRowsPerPage()

 			// Determine columns based on current viewport
-			const vw = window.innerWidth;
-			let columns = 2; // Default for small screens
-			if (vw >= 1280) columns = 8; // xl breakpoint
-			else if (vw >= 1024) columns = 6; // lg breakpoint
-			else if (vw >= 768) columns = 4; // md breakpoint
-			else if (vw >= 640) columns = 3; // sm breakpoint
+			const vw = window.innerWidth
+			let columns = 2 // Default for small screens
+			if (vw >= 1280)
+				columns = 8 // xl breakpoint
+			else if (vw >= 1024)
+				columns = 6 // lg breakpoint
+			else if (vw >= 768)
+				columns = 4 // md breakpoint
+			else if (vw >= 640) columns = 3 // sm breakpoint

-			setIconsPerPage(rows * columns);
-		};
+			setIconsPerPage(rows * columns)
+		}

 		// Initial setup
-		updateIconsPerPage();
+		updateIconsPerPage()

 		// Add resize listener
-		window.addEventListener('resize', updateIconsPerPage);
+		window.addEventListener("resize", updateIconsPerPage)

 		// Cleanup
-		return () => window.removeEventListener('resize', updateIconsPerPage);
-	}, []);
+		return () => window.removeEventListener("resize", updateIconsPerPage)
+	}, [])

 	// Reset page when search parameters change
 	useEffect(() => {
-		setCurrentPage(1);
-	}, [debouncedQuery, selectedCategories, sortOption]);
+		setCurrentPage(1)
+	}, [])

 	useEffect(() => {
 		const timer = setTimeout(() => {
@@ -221,6 +227,21 @@ export function IconSearch({ icons }: IconSearchProps) {
 		[pathname, router, initialSort],
 	)

+	// Validate currentPage when iconsPerPage or filteredIcons change
+	useEffect(() => {
+		// Calculate new total pages
+		const totalPages = Math.ceil(filteredIcons.length / iconsPerPage)
+
+		// If current page is out of bounds, adjust it
+		if (currentPage > totalPages && totalPages > 0) {
+			// Update current page state
+			setCurrentPage(totalPages)
+
+			// Update URL to reflect the adjusted page
+			updateResults(searchQuery, selectedCategories, sortOption, totalPages)
+		}
+	}, [iconsPerPage, filteredIcons.length, currentPage, searchQuery, selectedCategories, sortOption, updateResults])
+
 	const handleSearch = useCallback(
 		(query: string) => {
 			setSearchQuery(query)
@@ -262,8 +283,8 @@ export function IconSearch({ icons }: IconSearchProps) {

 	const handlePageChange = useCallback(
 		(page: number) => {
-			setCurrentPage(page);
-			updateResults(searchQuery, selectedCategories, sortOption, page);
+			setCurrentPage(page)
+			updateResults(searchQuery, selectedCategories, sortOption, page)
 		},
 		[updateResults, searchQuery, selectedCategories, sortOption],
 	)
@@ -300,11 +321,11 @@ export function IconSearch({ icons }: IconSearchProps) {
 	const getSortLabel = (sort: SortOption) => {
 		switch (sort) {
 			case "relevance":
-				return "Relevance"
+				return "Best match"
 			case "alphabetical-asc":
-				return "Name (A-Z)"
+				return "A to Z"
 			case "alphabetical-desc":
-				return "Name (Z-A)"
+				return "Z to A"
 			case "newest":
 				return "Newest first"
 			default:
@@ -337,7 +358,7 @@ export function IconSearch({ icons }: IconSearchProps) {
 					</div>
 					<Input
 						type="search"
-						placeholder="Search for icons..."
+						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   border-border shadow-sm"
 						value={searchQuery}
 						onChange={(e) => handleSearch(e.target.value)}
@@ -349,18 +370,18 @@ export function IconSearch({ icons }: IconSearchProps) {
 					{/* Filter dropdown */}
 					<DropdownMenu>
 						<DropdownMenuTrigger asChild>
-							<Button
-								variant="outline"
-								size="sm"
-								className="flex-1 sm:flex-none cursor-pointer bg-background border-border shadow-sm"
-								aria-label="Filter icons"
-							>
+							<Button variant="outline" size="sm" className="flex-1 sm:flex-none cursor-pointer bg-background border-border shadow-sm ">
 								<Filter className="h-4 w-4 mr-2" />
-								<span>{selectedCategories.length > 0 ? `Filters (${selectedCategories.length})` : "Filter"}</span>
+								<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">Select Categories</DropdownMenuLabel>
+							<DropdownMenuLabel className="font-semibold">Categories</DropdownMenuLabel>
 							<DropdownMenuSeparator />

 							<div className="max-h-[40vh] overflow-y-auto p-1">
@@ -386,7 +407,7 @@ export function IconSearch({ icons }: IconSearchProps) {
 										}}
 										className="cursor-pointer  focus: focus:bg-rose-50 dark:focus:bg-rose-950/20"
 									>
-										Clear categories
+										Clear all filters
 									</DropdownMenuItem>
 								</>
 							)}
@@ -402,18 +423,18 @@ export function IconSearch({ icons }: IconSearchProps) {
 							</Button>
 						</DropdownMenuTrigger>
 						<DropdownMenuContent align="start" className="w-56">
-							<DropdownMenuLabel className="font-semibold">Sort Icons</DropdownMenuLabel>
+							<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" />
-									Relevance
+									Best match
 								</DropdownMenuRadioItem>
 								<DropdownMenuRadioItem value="alphabetical-asc" className="cursor-pointer">
-									<ArrowDownAZ className="h-4 w-4 mr-2" />Name (A-Z)
+									<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" />Name (Z-A)
+									<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" />
@@ -425,15 +446,9 @@ export function IconSearch({ icons }: IconSearchProps) {

 					{/* 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"
-							aria-label="Reset all filters"
-						>
+						<Button variant="outline" size="sm" onClick={clearFilters} className="flex-1 sm:flex-none cursor-pointer bg-background">
 							<X className="h-4 w-4 mr-2" />
-							<span>Reset</span>
+							<span>Clear all</span>
 						</Button>
 					)}
 				</div>
@@ -441,7 +456,7 @@ export function IconSearch({ icons }: IconSearchProps) {
 				{/* Active filter badges */}
 				{selectedCategories.length > 0 && (
 					<div className="flex flex-wrap items-center gap-2 mt-2">
-						<span className="text-sm text-muted-foreground">Selected:</span>
+						<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">
@@ -467,7 +482,7 @@ export function IconSearch({ icons }: IconSearchProps) {
 							}}
 							className="text-xs h-7 px-2 cursor-pointer"
 						>
-							Clear
+							Clear all
 						</Button>
 					</div>
 				)}
@@ -478,33 +493,27 @@ export function IconSearch({ icons }: IconSearchProps) {
 			{filteredIcons.length === 0 ? (
 				<div className="flex flex-col gap-8 py-12 max-w-2xl mx-auto items-center">
 					<div className="text-center">
-						<h2 className="text-3xl sm:text-5xl font-semibold">Icon not found</h2>
-						<p className="text-lg text-muted-foreground mt-2">Help us expand our collection</p>
-					</div>
-					<div className="flex flex-col gap-4 items-center w-full">
-						<IconSubmissionContent />
-						<div className="mt-4 flex items-center gap-2 justify-center">
-							<span className="text-sm text-muted-foreground">Can't submit it yourself?</span>
-							<Button
-								className="cursor-pointer"
-								variant="outline"
-								size="sm"
-								onClick={() => {
-									setIsLazyRequestSubmitted(true)
-									toast("Request received!", {
-										description: `We've noted your request for "${searchQuery || "this icon"}". Thanks for your suggestion.`,
-									})
-									posthog.capture("lazy icon request", {
-										query: searchQuery,
-										categories: selectedCategories,
-									})
-								}}
-								disabled={isLazyRequestSubmitted}
-							>
-								Request this icon
-							</Button>
-						</div>
+						<h2 className="text-3xl sm:text-5xl font-semibold">We don't have this one...yet!</h2>
 					</div>
+					<Button
+						className="cursor-pointer motion-preset-pop"
+						variant="default"
+						size="lg"
+						onClick={() => {
+							setIsLazyRequestSubmitted(true)
+							toast("We hear you!", {
+								description: `Okay, okay... we'll consider adding "${searchQuery || "that icon"}" just for you. 😉`,
+							})
+							posthog.capture("lazy icon request", {
+								query: searchQuery,
+								categories: selectedCategories,
+							})
+						}}
+						disabled={isLazyRequestSubmitted}
+					>
+						I want this icon added but I'm too lazy to add it myself
+					</Button>
+					<IconSubmissionContent />
 				</div>
 			) : (
 				<>
@@ -551,7 +560,7 @@ function IconCard({
 						className="object-contain p-1 group-hover:scale-110 transition-transform duration-300"
 					/>
 				</div>
-				<span className="text-xs sm:text-sm text-center truncate w-full capitalize group-hover:text-rose-500 dark:group-hover:text-rose-400 transition-colors duration-200 font-medium">
+				<span className="text-xs sm:text-sm text-center truncate w-full capitalize group- dark:group-hover:text-rose-400 transition-colors duration-200 font-medium">
 					{name.replace(/-/g, " ")}
 				</span>
 			</Link>
@@ -577,42 +586,42 @@ function IconsGrid({ filteredIcons, matchedAliases, currentPage, iconsPerPage, o

 	// Calculate letter ranges for each page
 	const getLetterRange = (pageNum: number) => {
-		if (filteredIcons.length === 0) return '';
-		const start = (pageNum - 1) * iconsPerPage;
-		const end = Math.min(start + iconsPerPage - 1, filteredIcons.length - 1);
+		if (filteredIcons.length === 0) return ""
+		const start = (pageNum - 1) * iconsPerPage
+		const end = Math.min(start + iconsPerPage - 1, filteredIcons.length - 1)

-		if (start >= filteredIcons.length) return '';
+		if (start >= filteredIcons.length) return ""

-		const firstLetter = filteredIcons[start].name.charAt(0).toUpperCase();
-		const lastLetter = filteredIcons[end].name.charAt(0).toUpperCase();
+		const firstLetter = filteredIcons[start].name.charAt(0).toUpperCase()
+		const lastLetter = filteredIcons[end].name.charAt(0).toUpperCase()

-		return firstLetter === lastLetter ? firstLetter : `${firstLetter} - ${lastLetter}`;
-	};
+		return firstLetter === lastLetter ? firstLetter : `${firstLetter} - ${lastLetter}`
+	}

 	// Get current page letter range
-	const currentLetterRange = getLetterRange(currentPage);
+	const currentLetterRange = getLetterRange(currentPage)

 	// Handle direct page input
-	const [pageInput, setPageInput] = useState(currentPage.toString());
+	const [pageInput, setPageInput] = useState(currentPage.toString())

 	useEffect(() => {
-		setPageInput(currentPage.toString());
-	}, [currentPage]);
+		setPageInput(currentPage.toString())
+	}, [currentPage])

 	const handlePageInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-		setPageInput(e.target.value);
-	};
+		setPageInput(e.target.value)
+	}

 	const handlePageInputSubmit = (e: React.FormEvent) => {
-		e.preventDefault();
-		const pageNumber = parseInt(pageInput);
-		if (!isNaN(pageNumber) && pageNumber >= 1 && pageNumber <= totalPages) {
-			onPageChange(pageNumber);
+		e.preventDefault()
+		const pageNumber = Number.parseInt(pageInput)
+		if (!Number.isNaN(pageNumber) && pageNumber >= 1 && pageNumber <= totalPages) {
+			onPageChange(pageNumber)
 		} else {
 			// Reset to current page if invalid
-			setPageInput(currentPage.toString());
+			setPageInput(currentPage.toString())
 		}
-	};
+	}

 	return (
 		<>
@@ -636,18 +645,14 @@ function IconsGrid({ filteredIcons, matchedAliases, currentPage, iconsPerPage, o
 					{/* Mobile view: centered content */}
 					<div className="text-sm text-muted-foreground text-center md:text-left md:hidden">
 						Showing {indexOfFirstIcon + 1}-{Math.min(indexOfLastIcon, totalIcons)} of {totalIcons} icons
-						{currentLetterRange && (
-							<span className="ml-2 font-medium">({currentLetterRange})</span>
-						)}
+						{currentLetterRange && <span className="ml-2 font-medium">({currentLetterRange})</span>}
 					</div>

 					{/* Desktop view layout */}
 					<div className="hidden md:flex justify-between items-center">
 						<div className="text-sm text-muted-foreground">
 							Showing {indexOfFirstIcon + 1}-{Math.min(indexOfLastIcon, totalIcons)} of {totalIcons} icons
-							{currentLetterRange && (
-								<span className="ml-2 font-medium">({currentLetterRange})</span>
-							)}
+							{currentLetterRange && <span className="ml-2 font-medium">({currentLetterRange})</span>}
 						</div>

 						<div className="flex items-center gap-4">
@@ -663,7 +668,9 @@ function IconsGrid({ filteredIcons, matchedAliases, currentPage, iconsPerPage, o
 									aria-label="Go to page"
 								/>
 								<span className="text-sm whitespace-nowrap">of {totalPages}</span>
-								<Button type="submit" size="sm" variant="outline" className="h-8 cursor-pointer">Go</Button>
+								<Button type="submit" size="sm" variant="outline" className="h-8 cursor-pointer">
+									Go
+								</Button>
 							</form>

 							{/* Pagination controls */}
@@ -682,19 +689,19 @@ function IconsGrid({ filteredIcons, matchedAliases, currentPage, iconsPerPage, o
 								<div className="flex items-center overflow-hidden">
 									{Array.from({ length: Math.min(5, totalPages) }, (_, i) => {
 										// Show pages around current page
-										let pageNum;
+										let pageNum: number
 										if (totalPages <= 5) {
-											pageNum = i + 1;
+											pageNum = i + 1
 										} else if (currentPage <= 3) {
-											pageNum = i + 1;
+											pageNum = i + 1
 										} else if (currentPage >= totalPages - 2) {
-											pageNum = totalPages - 4 + i;
+											pageNum = totalPages - 4 + i
 										} else {
-											pageNum = currentPage - 2 + i;
+											pageNum = currentPage - 2 + i
 										}

 										// Calculate letter range for this page
-										const letterRange = getLetterRange(pageNum);
+										const letterRange = getLetterRange(pageNum)

 										return (
 											<Button
@@ -715,7 +722,7 @@ function IconsGrid({ filteredIcons, matchedAliases, currentPage, iconsPerPage, o
 													</span>
 												)}
 											</Button>
-										);
+										)
 									})}
 								</div>

@@ -751,15 +758,15 @@ function IconsGrid({ filteredIcons, matchedAliases, currentPage, iconsPerPage, o
 							<div className="flex items-center overflow-hidden">
 								{Array.from({ length: Math.min(5, totalPages) }, (_, i) => {
 									// Show pages around current page - same logic as desktop
-									let pageNum;
+									let pageNum: number
 									if (totalPages <= 5) {
-										pageNum = i + 1;
+										pageNum = i + 1
 									} else if (currentPage <= 3) {
-										pageNum = i + 1;
+										pageNum = i + 1
 									} else if (currentPage >= totalPages - 2) {
-										pageNum = totalPages - 4 + i;
+										pageNum = totalPages - 4 + i
 									} else {
-										pageNum = currentPage - 2 + i;
+										pageNum = currentPage - 2 + i
 									}

 									return (
@@ -768,15 +775,13 @@ function IconsGrid({ filteredIcons, matchedAliases, currentPage, iconsPerPage, o
 											onClick={() => onPageChange(pageNum)}
 											variant={pageNum === currentPage ? "default" : "outline"}
 											size="sm"
-											className={`h-8 w-8 p-0 rounded-none cursor-pointer ${
-												pageNum === currentPage ? "font-medium" : ""
-											}`}
+											className={`h-8 w-8 p-0 rounded-none cursor-pointer ${pageNum === currentPage ? "font-medium" : ""}`}
 											aria-label={`Page ${pageNum}`}
 											aria-current={pageNum === currentPage ? "page" : undefined}
 										>
 											{pageNum}
 										</Button>
-									);
+									)
 								})}
 							</div>

@@ -804,7 +809,9 @@ function IconsGrid({ filteredIcons, matchedAliases, currentPage, iconsPerPage, o
 								aria-label="Go to page"
 							/>
 							<span className="text-sm whitespace-nowrap">of {totalPages}</span>
-							<Button type="submit" size="sm" variant="outline" className="h-8 cursor-pointer">Go</Button>
+							<Button type="submit" size="sm" variant="outline" className="h-8 cursor-pointer">
+								Go
+							</Button>
 						</form>
 					</div>
 				</div>
--- a/web/src/app/icons/page.tsx
+++ b/web/src/app/icons/page.tsx
@@ -1,39 +1,49 @@
-import { BASE_URL, BROWSE_KEYWORDS, DEFAULT_OG_IMAGE, GITHUB_URL, ORGANIZATION_NAME, ORGANIZATION_SCHEMA, SITE_NAME, SITE_TAGLINE, TITLE_SEPARATOR, WEB_URL, getBrowseDescription } from "@/constants"
+import { BASE_URL } from "@/constants"
 import { getIconsArray } from "@/lib/api"
 import type { Metadata } from "next"
 import { IconSearch } from "./components/icon-search"
-import { StructuredData } from "@/components/structured-data"

 export async function generateMetadata(): Promise<Metadata> {
 	const icons = await getIconsArray()
 	const totalIcons = icons.length

-	const title = `Browse Icons ${TITLE_SEPARATOR} ${SITE_NAME}`
-	const description = getBrowseDescription(totalIcons)
-
 	return {
-		title,
-		description,
-		keywords: BROWSE_KEYWORDS,
+		title: "Browse Icons | Free Dashboard Icons",
+		description: `Search and browse through our collection of ${totalIcons} curated icons for services, applications and tools, designed specifically for dashboards and app directories.`,
+		keywords: [
+			"browse icons",
+			"dashboard icons",
+			"icon search",
+			"service icons",
+			"application icons",
+			"tool icons",
+			"web dashboard",
+			"app directory",
+		],
 		openGraph: {
-			title: `Browse Icons ${TITLE_SEPARATOR} ${SITE_NAME} ${TITLE_SEPARATOR} ${SITE_TAGLINE}`,
-			description,
+			title: "Browse Icons | Free Dashboard Icons",
+			description: `Search and browse through our collection of ${totalIcons} curated icons for services, applications and tools, designed specifically for dashboards and app directories.`,
 			type: "website",
-			url: `${WEB_URL}/icons`,
-			images: [DEFAULT_OG_IMAGE],
+			url: `${BASE_URL}/icons`,
+			images: [
+				{
+					url: "/og-image.png",
+					width: 1200,
+					height: 630,
+					alt: "Browse Dashboard Icons Collection",
+					type: "image/png",
+				},
+			],
 		},
 		twitter: {
 			card: "summary_large_image",
-			title: `Browse Icons ${TITLE_SEPARATOR} ${SITE_NAME} ${TITLE_SEPARATOR} ${SITE_TAGLINE}`,
-			description,
-			images: [DEFAULT_OG_IMAGE.url],
+			title: "Browse Icons | Free Dashboard Icons",
+			description: `Search and browse through our collection of ${totalIcons} curated icons for services, applications and tools, designed specifically for dashboards and app directories.`,
+			images: ["/og-image-browse.png"],
 		},
 		alternates: {
-			canonical: `${WEB_URL}/icons`,
+			canonical: `${BASE_URL}/icons`,
 		},
-		other: {
-			"revisit-after": "3 days",
-		}
 	}
 }

@@ -41,38 +51,20 @@ export const dynamic = "force-static"

 export default async function IconsPage() {
 	const icons = await getIconsArray()
-
-	const gallerySchema = {
-		"@context": "https://schema.org",
-		"@type": "ImageGallery",
-		"name": `${SITE_NAME} - Browse ${icons.length} Icons - ${SITE_TAGLINE}`,
-		"description": getBrowseDescription(icons.length),
-		"url": `${WEB_URL}/icons`,
-		"numberOfItems": icons.length,
-		"creator": {
-			"@type": "Organization",
-			"name": ORGANIZATION_NAME,
-			"url": GITHUB_URL
-		}
-	}
-
 	return (
-		<>
-			<StructuredData data={gallerySchema} id="gallery-schema" />
-			<div className="isolate overflow-hidden">
-				<div className="py-8">
-					<div className="space-y-4 mb-8 mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
-						<div className="flex flex-col sm:flex-row sm:items-center justify-between gap-4">
-							<div>
-								<h1 className="text-3xl font-bold">Icons</h1>
-								<p className="text-muted-foreground">Search our collection of {icons.length} icons - {SITE_TAGLINE}.</p>
-							</div>
+		<div className="isolate overflow-hidden">
+			<div className="py-8">
+				<div className="space-y-4 mb-8 mx-auto max-w-7xl">
+					<div className="flex flex-col sm:flex-row sm:items-center justify-between gap-4">
+						<div>
+							<h1 className="text-3xl font-bold">Browse icons</h1>
+							<p className="text-muted-foreground">Search through our collection of {icons.length} beautiful icons.</p>
 						</div>
-
-						<IconSearch icons={icons} />
 					</div>
+
+					<IconSearch icons={icons} />
 				</div>
 			</div>
-		</>
+		</div>
 	)
 }
--- a/web/src/app/layout.tsx
+++ b/web/src/app/layout.tsx
@@ -2,13 +2,12 @@ import { PostHogProvider } from "@/components/PostHogProvider"
 import { Footer } from "@/components/footer"
 import { HeaderWrapper } from "@/components/header-wrapper"
 import { LicenseNotice } from "@/components/license-notice"
-import { WebsiteStructuredData } from "@/components/structured-data"
 import { getTotalIcons } from "@/lib/api"
 import type { Metadata, Viewport } from "next"
 import { Inter } from "next/font/google"
 import { Toaster } from "sonner"
 import "./globals.css"
-import { DEFAULT_KEYWORDS, DEFAULT_OG_IMAGE, GITHUB_URL, ORGANIZATION_NAME, ORGANIZATION_SCHEMA, SITE_NAME, SITE_TAGLINE, WEB_URL, getDescription, getWebsiteSchema, websiteFullTitle, websiteTitle } from "@/constants"
+import { BASE_URL, getDescription, WEB_URL, websiteTitle } from "@/constants"
 import { ThemeProvider } from "./theme-provider"

 const inter = Inter({
@@ -28,39 +27,45 @@ export const viewport: Viewport = {

 export async function generateMetadata(): Promise<Metadata> {
 	const { totalIcons } = await getTotalIcons()
-	const description = getDescription(totalIcons)

 	return {
 		metadataBase: new URL(WEB_URL),
 		title: websiteTitle,
-		description,
-		keywords: DEFAULT_KEYWORDS,
+		description: getDescription(totalIcons),
+		keywords: ["dashboard icons", "service icons", "application icons", "tool icons", "web dashboard", "app directory"],
 		robots: {
 			index: true,
 			follow: true,
-			"max-image-preview": "large",
-			"max-snippet": -1,
-			"max-video-preview": -1,
 			googleBot: "index, follow",
 		},
 		openGraph: {
-			siteName: SITE_NAME,
-			type: "website",
-			locale: "en_US",
-			title: websiteFullTitle,
-			description,
-			url: WEB_URL,
-			images: [DEFAULT_OG_IMAGE],
+			siteName: WEB_URL,
+			title: websiteTitle,
+			url: BASE_URL,
+			description: getDescription(totalIcons),
+			images: [
+				{
+					url: "/og-image.png",
+					width: 1200,
+					height: 630,
+					alt: "Dashboard Icons - Dashboard icons for self hosted services",
+					type: "image/png",
+				},
+			],
 		},
 		twitter: {
 			card: "summary_large_image",
-			title: websiteFullTitle,
-			description,
-			images: [DEFAULT_OG_IMAGE.url],
+			title: WEB_URL,
+			description: getDescription(totalIcons),
+			images: ["/og-image.png"],
 		},
-		applicationName: SITE_NAME,
+		applicationName: WEB_URL,
+		alternates: {
+			canonical: BASE_URL,
+		},
+
 		appleWebApp: {
-			title: SITE_NAME,
+			title: "Dashboard Icons",
 			statusBarStyle: "default",
 			capable: true,
 		},
@@ -71,38 +76,16 @@ export async function generateMetadata(): Promise<Metadata> {
 				{ url: "/favicon-32x32.png", sizes: "32x32", type: "image/png" },
 			],
 			apple: [{ url: "/apple-touch-icon.png", sizes: "180x180", type: "image/png" }],
-			other: [
-				{
-					rel: "mask-icon",
-					url: "/safari-pinned-tab.svg",
-					color: "#000000",
-				},
-			],
 		},
 		manifest: "/site.webmanifest",
-		authors: [{ name: ORGANIZATION_NAME, url: GITHUB_URL }],
-		creator: ORGANIZATION_NAME,
-		publisher: ORGANIZATION_NAME,
-		category: "Icons",
-		classification: "Dashboard Design Resources",
-		other: {
-			"revisit-after": "7 days",
-		},
 	}
 }

-export default async function RootLayout({ children }: Readonly<{ children: React.ReactNode }>) {
-	const { totalIcons } = await getTotalIcons()
-	const websiteSchema = getWebsiteSchema(totalIcons)
-
+export default function RootLayout({ children }: Readonly<{ children: React.ReactNode }>) {
 	return (
 		<html lang="en" suppressHydrationWarning>
 			<body className={`${inter.variable} antialiased bg-background flex flex-col min-h-screen`}>
 				<PostHogProvider>
-					<WebsiteStructuredData
-						websiteSchema={websiteSchema}
-						organizationSchema={ORGANIZATION_SCHEMA}
-					/>
 					<ThemeProvider attribute="class" defaultTheme="system" enableSystem disableTransitionOnChange>
 						<HeaderWrapper />
 						<main className="flex-grow">{children}</main>
--- a/web/src/app/not-found.tsx
+++ b/web/src/app/not-found.tsx
@@ -15,9 +15,9 @@ export default function NotFound({
 					<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">Not found</h1>
+					<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">
-						This icon does not exist or could not be loaded.
+						The icon you are looking for could not be found or there was an error loading it.
 					</p>
 				</div>

@@ -25,16 +25,16 @@ export default function NotFound({
 					<Button asChild variant="outline">
 						<Link href="/icons">
 							<ArrowLeft className="mr-2 h-4 w-4" />
-							Back to icons
+							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">Missing an icon?</h2>
+						<h2 className="text-xl font-semibold">Can't find what you're looking for?</h2>
 						<p className="text-muted-foreground mt-2">
-							Submit a new icon or suggest improvements to our collection.
+							Contribute to our icon collection by suggesting a new icon or improving an existing one.
 						</p>
 					</div>

--- a/web/src/app/page.tsx
+++ b/web/src/app/page.tsx
@@ -1,40 +1,7 @@
 import { HeroSection } from "@/components/hero"
 import { RecentlyAddedIcons } from "@/components/recently-added-icons"
-import { StructuredData } from "@/components/structured-data"
-import { BASE_URL, DEFAULT_KEYWORDS, DEFAULT_OG_IMAGE, GITHUB_URL, ORGANIZATION_NAME, ORGANIZATION_SCHEMA, SITE_NAME, SITE_TAGLINE, WEB_URL, REPO_NAME, getHomeDescription, websiteFullTitle, websiteTitle } from "@/constants"
+import { REPO_NAME } from "@/constants"
 import { getRecentlyAddedIcons, getTotalIcons } from "@/lib/api"
-import type { Metadata } from "next"
-
-export async function generateMetadata(): Promise<Metadata> {
-	const { totalIcons } = await getTotalIcons()
-	const description = getHomeDescription(totalIcons)
-
-	return {
-		title: websiteTitle,
-		description,
-		keywords: DEFAULT_KEYWORDS,
-		robots: {
-			index: true,
-			follow: true,
-		},
-		openGraph: {
-			title: websiteFullTitle,
-			description,
-			type: "website",
-			url: WEB_URL,
-			images: [DEFAULT_OG_IMAGE],
-		},
-		twitter: {
-			title: websiteFullTitle,
-			description,
-			card: "summary_large_image",
-			images: [DEFAULT_OG_IMAGE.url],
-		},
-		alternates: {
-			canonical: WEB_URL,
-		},
-	}
-}

 async function getGitHubStars() {
 	const response = await fetch(`https://api.github.com/repos/${REPO_NAME}`)
@@ -49,11 +16,9 @@ export default async function Home() {
 	const stars = await getGitHubStars()

 	return (
-		<>
-			<div className="flex flex-col min-h-screen">
-				<HeroSection totalIcons={totalIcons} stars={stars} />
-				<RecentlyAddedIcons icons={recentIcons} />
-			</div>
-		</>
+		<div className="flex flex-col min-h-screen">
+			<HeroSection totalIcons={totalIcons} stars={stars} />
+			<RecentlyAddedIcons icons={recentIcons} />
+		</div>
 	)
 }
--- a/web/src/components/carbon.tsx
+++ b/web/src/components/carbon.tsx
@@ -7,7 +7,7 @@ export function Carbon() {
 	}

 	useEffect(() => {
-		const serve = "CW7IP27L"
+		const serve = "CW7IKKQM"
 		const placement = "dashboardiconscom"
 		ref.current.innerHTML = ""
 		const s = document.createElement("script")
--- a/web/src/components/command-menu.tsx
+++ b/web/src/components/command-menu.tsx
@@ -0,0 +1,138 @@
+"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 { useCallback, useEffect, useState } from "react"
+
+interface CommandMenuProps {
+	icons: {
+		name: string
+		data: {
+			categories: string[]
+			aliases: string[]
+			[key: string]: unknown
+		}
+	}[]
+	triggerButtonId?: string
+	open?: boolean
+	onOpenChange?: (open: boolean) => void
+}
+
+export function CommandMenu({ icons, open: externalOpen, onOpenChange: externalOnOpenChange }: CommandMenuProps) {
+	const router = useRouter()
+	const [internalOpen, setInternalOpen] = useState(false)
+	const [query, setQuery] = useState("")
+	const isDesktop = useMediaQuery("(min-width: 768px)")
+
+	// Use either external or internal state for controlling open state
+	const isOpen = externalOpen !== undefined ? externalOpen : internalOpen
+
+	// Wrap setIsOpen in useCallback to fix dependency issue
+	const setIsOpen = useCallback(
+		(value: boolean) => {
+			if (externalOnOpenChange) {
+				externalOnOpenChange(value)
+			} else {
+				setInternalOpen(value)
+			}
+		},
+		[externalOnOpenChange],
+	)
+
+	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()
+				setIsOpen(!isOpen)
+			}
+		}
+
+		document.addEventListener("keydown", handleKeyDown)
+		return () => document.removeEventListener("keydown", handleKeyDown)
+	}, [isOpen, setIsOpen])
+
+	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)
+		}
+
+		// 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
+
+			// 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
+
+			// 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
+
+			// 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={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
@@ -37,7 +37,7 @@ export function Footer() {
 					<div className="flex flex-col gap-3">
 						<h3 className="font-bold text-lg text-foreground/90">Dashboard Icons</h3>
 						<p className="text-sm text-muted-foreground leading-relaxed">
-							Collection of icons for applications, services, and tools - designed for dashboards and app directories.
+							A collection of curated icons for services, applications and tools, designed specifically for dashboards and app directories.
 						</p>
 					</div>

--- a/web/src/components/header.tsx
+++ b/web/src/components/header.tsx
@@ -3,14 +3,42 @@
 import { IconSubmissionForm } from "@/components/icon-submission-form"
 import { ThemeSwitcher } from "@/components/theme-switcher"
 import { REPO_PATH } from "@/constants"
+import { getIconsArray } from "@/lib/api"
+import type { IconWithName } from "@/types/icons"
 import { motion } from "framer-motion"
-import { Github } from "lucide-react"
+import { Github, 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 { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "./ui/tooltip"

 export function Header() {
+	const [iconsData, setIconsData] = useState<IconWithName[]>([])
+	const [isLoaded, setIsLoaded] = useState(false)
+	const [commandMenuOpen, setCommandMenuOpen] = useState(false)
+
+	useEffect(() => {
+		async function loadIcons() {
+			try {
+				const icons = await getIconsArray()
+				setIconsData(icons)
+				setIsLoaded(true)
+			} catch (error) {
+				console.error("Failed to load icons:", error)
+				setIsLoaded(true)
+			}
+		}
+
+		loadIcons()
+	}, [])
+
+	// Function to open the command menu
+	const openCommandMenu = () => {
+		setCommandMenuOpen(true)
+	}
+
 	return (
 		<motion.header
 			className="border-b sticky top-0 z-50 backdrop-blur-2xl bg-background/50 border-border/50"
@@ -28,6 +56,30 @@ export function Header() {
 					</div>
 				</div>
 				<div className="flex items-center gap-2 md:gap-4">
+					{/* Desktop search button */}
+					<div className="hidden md:block">
+						<Button variant="outline" className="gap-2 cursor-pointer   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 */}
+					<div className="md:hidden">
+						<Button
+							variant="ghost"
+							size="icon"
+							className="rounded-lg cursor-pointer transition-all duration-300 hover:ring-2 "
+							onClick={openCommandMenu}
+						>
+							<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">
 						<IconSubmissionForm />
 						<TooltipProvider>
@@ -54,6 +106,9 @@ export function Header() {
 					<ThemeSwitcher />
 				</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
@@ -205,61 +205,13 @@ export function HeroSection({ totalIcons, stars }: { totalIcons: number; stars:
 				/>
 			</div>

-			<div className="relative z-10 container mx-auto px-4 sm:px-6 lg:px-8 mt-4 py-20">
+			<div className="relative z-10 container mx-auto px-4 md:px-6 mt-4 py-20">
 				<div className="max-w-4xl mx-auto text-center flex flex-col gap-4 ">
 					<h1 className="relative text-3xl sm:text-5xl md:text-7xl font-bold mb-4 md:mb-8 tracking-tight motion-preset-slide-up motion-duration-500 ">
 						Your definitive source for
-						<motion.span
-							className="absolute -right-1 -bottom-3"
-							initial={{ opacity: 0, scale: 0.5, x: -20, y: -10 }}
-							animate={{ opacity: 1, scale: 1, x: 0, y: 0 }}
-							transition={{
-								duration: 0.5,
-								delay: 0.3,
-								ease: "easeOut"
-							}}
-						>
-							<motion.div
-								animate={{
-									y: [0, -3, 0],
-									rotate: [0, 5, 0]
-								}}
-								transition={{
-									duration: 3,
-									repeat: Infinity,
-									repeatType: "reverse",
-									ease: "easeInOut"
-								}}
-							>
-								<Sparkles className="text-rose-500 h-8 w-8 sm:h-12 sm:w-12 md:h-16 md:w-12" />
-							</motion.div>
-						</motion.span>
+						<Sparkles className="absolute -right-1 -bottom-3 text-rose-500 h-8 w-8 sm:h-12 sm:w-12 md:h-16 md:w-12 motion-delay-300 motion-preset-seesaw-lg motion-scale-in-[0.5] motion-translate-x-in-[-120%] motion-translate-y-in-[-60%] motion-opacity-in-[33%] motion-rotate-in-[-1080deg] motion-blur-in-[10px] motion-duration-500 motion-delay-[0.13s]/scale motion-duration-[0.13s]/opacity motion-duration-[0.40s]/rotate motion-duration-[0.05s]/blur motion-delay-[0.20s]/blur motion-ease-spring-bouncier" />
 						<br />
-						<motion.span
-							className="absolute -left-1 -top-3"
-							initial={{ opacity: 0, scale: 0.5, x: 20, y: -10 }}
-							animate={{ opacity: 1, scale: 1, x: 0, y: 0 }}
-							transition={{
-								duration: 0.5,
-								delay: 0.3,
-								ease: "easeOut"
-							}}
-						>
-							<motion.div
-								animate={{
-									y: [0, -3, 0],
-									rotate: [0, -5, 0]
-								}}
-								transition={{
-									duration: 4,
-									repeat: Infinity,
-									repeatType: "reverse",
-									ease: "easeInOut"
-								}}
-							>
-								<Sparkles className="text-rose-500 h-5 w-5 sm:h-8 sm:w-8 md:h-12 md:w-12" />
-							</motion.div>
-						</motion.span>
+						<Sparkles className="absolute -left-1 -top-3 text-rose-500 h-5 w-5 sm:h-8 sm:w-8 md:h-12 md:w-12 motion-delay-300 motion-preset-seesaw-lg motion-scale-in-[0.5] motion-translate-x-in-[159%] motion-translate-y-in-[-60%] motion-opacity-in-[33%] motion-rotate-in-[-1080deg] motion-blur-in-[10px] motion-duration-500 motion-delay-[0.13s]/scale motion-duration-[0.13s]/opacity motion-duration-[0.40s]/rotate motion-duration-[0.05s]/blur motion-delay-[0.20s]/blur motion-ease-spring-bouncier" />
 						<AuroraText colors={["#FA5352", "#FA5352", "orange"]}>dashboard icons</AuroraText>
 					</h1>

@@ -272,7 +224,7 @@ export function HeroSection({ totalIcons, stars }: { totalIcons: number; stars:
 						<SearchInput searchQuery={searchQuery} setSearchQuery={setSearchQuery} totalIcons={totalIcons} />
 						<div className="w-full flex gap-3 md:gap-4 flex-wrap justify-center motion-preset-slide-down motion-duration-500">
 							<Link href="/icons">
-								<InteractiveHoverButton className="rounded-md bg-input/30">Browse icons</InteractiveHoverButton>
+								<InteractiveHoverButton className="rounded-md bg-input/30">Explore icons</InteractiveHoverButton>
 							</Link>
 							<GiveUsAStarButton stars={stars} />
 							<GiveUsMoneyButton />
@@ -497,12 +449,12 @@ export function GiveUsMoneyButton() {
 					<div className="flex justify-between items-center pt-2">
 						<Link href={openCollectiveUrl} target="_blank" rel="noopener noreferrer">
 							<Button variant="default" size="sm" className="bg-primary hover:bg-primary/90">
-								Support
+								Donate
 							</Button>
 						</Link>
 						<Link href={`${openCollectiveUrl}/transactions`} target="_blank" rel="noopener noreferrer">
 							<Button variant="link" size="sm" className="flex items-center gap-1 text-xs text-secondary-foreground">
-								View transactions
+								View expenses
 								<ExternalLink className="h-3 w-3" />
 							</Button>
 						</Link>
@@ -526,7 +478,7 @@ function SearchInput({ searchQuery, setSearchQuery, totalIcons }: SearchInputPro
 				name="q"
 				autoFocus
 				type="search"
-				placeholder="Search for icons..."
+				placeholder={`Find any of ${totalIcons} icons by name or category...`}
 				className="pl-10 h-10 md:h-12 rounded-lg w-full border-border focus:border-primary/20 text-sm md:text-base"
 				value={searchQuery}
 				onChange={(e) => setSearchQuery(e.target.value)}
--- a/web/src/components/icon-details.tsx
+++ b/web/src/components/icon-details.tsx
@@ -207,7 +207,6 @@ export function IconDetails({ icon, iconData, authorData }: IconDetailsProps) {
 										size="icon"
 										className="h-8 w-8 rounded-lg cursor-pointer"
 										onClick={(e) => handleDownload(e, imageUrl, `${iconName}.${format}`)}
-										aria-label={`Download ${iconName} in ${format} format${theme ? ` (${theme} theme)` : ""}`}
 									>
 										<Download className="w-4 h-4" />
 									</Button>
@@ -224,7 +223,6 @@ export function IconDetails({ icon, iconData, authorData }: IconDetailsProps) {
 										size="icon"
 										className="h-8 w-8 rounded-lg cursor-pointer"
 										onClick={(e) => handleCopy(imageUrl, `btn-${variantKey}`, e)}
-										aria-label={`Copy URL for ${iconName} in ${format} format${theme ? ` (${theme} theme)` : ""}`}
 									>
 										{copiedVariants[`btn-${variantKey}`] ? <Check className="w-4 h-4 text-green-500" /> : <Copy className="w-4 h-4" />}
 									</Button>
@@ -236,18 +234,8 @@ export function IconDetails({ icon, iconData, authorData }: IconDetailsProps) {

 							<Tooltip>
 								<TooltipTrigger asChild>
-									<Button
-										variant="outline"
-										size="icon"
-										className="h-8 w-8 rounded-lg"
-										asChild
-									>
-										<Link
-											href={githubUrl}
-											target="_blank"
-											rel="noopener noreferrer"
-											aria-label={`View ${iconName} ${format} file on GitHub`}
-										>
+									<Button variant="outline" size="icon" className="h-8 w-8 rounded-lg" asChild>
+										<Link href={githubUrl} target="_blank" rel="noopener noreferrer">
 											<Github className="w-4 h-4" />
 										</Link>
 									</Button>
@@ -264,7 +252,7 @@ export function IconDetails({ icon, iconData, authorData }: IconDetailsProps) {
 	}

 	return (
-		<div className="container mx-auto pt-12 pb-14 px-4 sm:px-6 lg:px-8">
+		<div className="container mx-auto pt-12 pb-14">
 			<div className="grid grid-cols-1 lg:grid-cols-4 gap-6">
 				{/* Left Column: Icon Info and Author */}
 				<div className="lg:col-span-1">
@@ -318,7 +306,7 @@ export function IconDetails({ icon, iconData, authorData }: IconDetailsProps) {

 								{iconData.categories && iconData.categories.length > 0 && (
 									<div>
-										<h3 className="text-sm font-semibold text-muted-foreground mb-2">Categories</h3>
+										<h3 className="text-sm font-semibold text-muted-foreground">Categories</h3>
 										<div className="flex flex-wrap gap-2">
 											{iconData.categories.map((category) => (
 												<Link key={category} href={`/icons?category=${encodeURIComponent(category)}`} className="cursor-pointer">
@@ -339,7 +327,7 @@ export function IconDetails({ icon, iconData, authorData }: IconDetailsProps) {

 								{iconData.aliases && iconData.aliases.length > 0 && (
 									<div>
-										<h3 className="text-sm font-semibold text-muted-foreground mb-2">Aliases</h3>
+										<h3 className="text-sm font-semibold text-muted-foreground">Aliases</h3>
 										<div className="flex flex-wrap gap-2">
 											{iconData.aliases.map((alias) => (
 												<Badge
@@ -356,17 +344,19 @@ export function IconDetails({ icon, iconData, authorData }: IconDetailsProps) {
 								)}

 								<div>
-									<h3 className="text-sm font-semibold text-muted-foreground mb-2">About this icon</h3>
+									<h3 className="text-sm font-semibold text-muted-foreground">About this icon</h3>
 									<div className="text-xs text-muted-foreground space-y-2">
 										<p>
-											Available in {availableFormats.length > 1
-												? `${availableFormats.length} formats (${availableFormats.map((f) => f.toUpperCase()).join(", ")}) `
-												: `${availableFormats[0].toUpperCase()} format `}
+											Available in{" "}
+											{availableFormats.length > 1
+												? `${availableFormats.length} formats (${availableFormats.map((f) => f.toUpperCase()).join(", ")})`
+												: `${availableFormats[0].toUpperCase()} format`}{" "}
 											with a base format of {iconData.base.toUpperCase()}.
 											{iconData.colors && " Includes both light and dark theme variants for better integration with different UI designs."}
 										</p>
 										<p>
-											Perfect for adding to dashboards, app directories, documentation, or anywhere you need the {icon.replace(/-/g, " ")} logo.
+											Use the {icon} icon in your web applications, dashboards, or documentation to enhance visual communication and user
+											experience.
 										</p>
 									</div>
 								</div>
@@ -422,7 +412,7 @@ export function IconDetails({ icon, iconData, authorData }: IconDetailsProps) {
 						<CardContent>
 							<div className="space-y-6">
 								<div className="">
-									<h3 className="text-sm font-semibold text-muted-foreground mb-2">Base format</h3>
+									<h3 className="text-sm font-semibold text-muted-foreground">Base format</h3>
 									<div className="flex items-center gap-2">
 										<FileType className="w-4 h-4 text-blue-500" />
 										<div className="px-3 py-1.5  border border-border rounded-lg text-sm font-medium">{iconData.base.toUpperCase()}</div>
@@ -430,7 +420,7 @@ export function IconDetails({ icon, iconData, authorData }: IconDetailsProps) {
 								</div>

 								<div className="">
-									<h3 className="text-sm font-semibold text-muted-foreground mb-2">Available formats</h3>
+									<h3 className="text-sm font-semibold text-muted-foreground">Available formats</h3>
 									<div className="flex flex-wrap gap-2">
 										{availableFormats.map((format) => (
 											<div key={format} className="px-3 py-1.5  border border-border rounded-lg text-xs font-medium">
@@ -442,7 +432,7 @@ export function IconDetails({ icon, iconData, authorData }: IconDetailsProps) {

 								{iconData.colors && (
 									<div className="">
-										<h3 className="text-sm font-semibold text-muted-foreground mb-2">Color variants</h3>
+										<h3 className="text-sm font-semibold text-muted-foreground">Color variants</h3>
 										<div className="space-y-2">
 											{Object.entries(iconData.colors).map(([theme, variant]) => (
 												<div key={theme} className="flex items-center gap-2">
@@ -456,7 +446,7 @@ export function IconDetails({ icon, iconData, authorData }: IconDetailsProps) {
 								)}

 								<div className="">
-									<h3 className="text-sm font-semibold text-muted-foreground mb-2">Source</h3>
+									<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">
 											<Github className="w-4 h-4 mr-2" />
--- a/web/src/components/icon-submission-form.tsx
+++ b/web/src/components/icon-submission-form.tsx
@@ -11,32 +11,32 @@ import { useState } from "react"
 export const ISSUE_TEMPLATES = [
 	{
 		id: "add_monochrome_icon",
-		name: "Add light/dark icon",
-		description: "Submit a new icon with light and dark versions.",
+		name: "Add light & dark icon",
+		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 standard icon",
-		description: "Submit a new icon for both themes.",
+		name: "Add normal icon",
+		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: "Improve or update an existing light/dark icon.",
+		name: "Update light & dark icon",
+		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 standard icon",
-		description: "Improve or update an existing standard icon.",
+		name: "Update normal icon",
+		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: "Other request",
-		description: "Submit another type of request.",
+		name: "Something else",
+		description: "Create a custom issue for other suggestions, bug reports, or improvements.",
 		url: `${REPO_PATH}/issues/new?template=BLANK_ISSUE`,
 	},
 ]
@@ -73,13 +73,13 @@ export function IconSubmissionForm() {
 		<Dialog open={open} onOpenChange={setOpen}>
 			<DialogTrigger asChild>
 				<Button variant="outline" className="hidden md:inline-flex cursor-pointer transition-all duration-300">
-					<PlusCircle className="h-4 w-4 transition-all duration-300" /> Submit icon(s)
+					<PlusCircle className="h-4 w-4 transition-all duration-300" /> Contribute new icon
 				</Button>
 			</DialogTrigger>
 			<DialogContent className="md:max-w-4xl backdrop-blur-2xl bg-background">
 				<DialogHeader>
-					<DialogTitle>Submit an icon</DialogTitle>
-					<DialogDescription>Select an option below to submit or update an icon.</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/magicui/animated-shiny-text.tsx
+++ b/web/src/components/magicui/animated-shiny-text.tsx
@@ -0,0 +1,33 @@
+import type { CSSProperties, ComponentPropsWithoutRef, FC } from "react"
+
+import { cn } from "@/lib/utils"
+
+export interface AnimatedShinyTextProps extends ComponentPropsWithoutRef<"span"> {
+	shimmerWidth?: number
+}
+
+export const AnimatedShinyText: FC<AnimatedShinyTextProps> = ({ children, className, shimmerWidth = 100, ...props }) => {
+	return (
+		<span
+			style={
+				{
+					"--shiny-width": `${shimmerWidth}px`,
+				} as CSSProperties
+			}
+			className={cn(
+				"mx-auto max-w-md text-neutral-600/70 dark:text-neutral-400/70",
+
+				// Shine effect
+				"animate-shiny-text bg-clip-text bg-no-repeat [background-position:0_0] [background-size:var(--shiny-width)_100%] [transition:background-position_1s_cubic-bezier(.6,.6,0,1)_infinite]",
+
+				// Shine gradient
+				"bg-gradient-to-r from-transparent via-black/80 via-50% to-transparent  dark:via-white/80",
+
+				className,
+			)}
+			{...props}
+		>
+			{children}
+		</span>
+	)
+}
--- a/web/src/components/magicui/magic-card.tsx
+++ b/web/src/components/magicui/magic-card.tsx
@@ -2,7 +2,7 @@

 import { motion, useMotionTemplate, useMotionValue } from "motion/react"
 import type React from "react"
-import { useCallback, useEffect, useRef, useState } from "react"
+import { useCallback, useEffect, useRef } from "react"

 import { cn } from "@/lib/utils"

@@ -28,7 +28,6 @@ export function MagicCard({
 	const cardRef = useRef<HTMLDivElement>(null)
 	const mouseX = useMotionValue(-gradientSize)
 	const mouseY = useMotionValue(-gradientSize)
-	const [isMounted, setIsMounted] = useState(false)

 	const handleMouseMove = useCallback(
 		(e: MouseEvent) => {
@@ -61,14 +60,6 @@ export function MagicCard({
 	}, [handleMouseMove, mouseX, gradientSize, mouseY])

 	useEffect(() => {
-		setIsMounted(true)
-		mouseX.set(-gradientSize)
-		mouseY.set(-gradientSize)
-	}, [gradientSize, mouseX, mouseY])
-
-	useEffect(() => {
-		if (!isMounted) return
-
 		document.addEventListener("mousemove", handleMouseMove)
 		document.addEventListener("mouseout", handleMouseOut)
 		document.addEventListener("mouseenter", handleMouseEnter)
@@ -78,17 +69,22 @@ export function MagicCard({
 			document.removeEventListener("mouseout", handleMouseOut)
 			document.removeEventListener("mouseenter", handleMouseEnter)
 		}
-	}, [isMounted, handleMouseEnter, handleMouseMove, handleMouseOut])
+	}, [handleMouseEnter, handleMouseMove, handleMouseOut])
+
+	useEffect(() => {
+		mouseX.set(-gradientSize)
+		mouseY.set(-gradientSize)
+	}, [gradientSize, mouseX, mouseY])

 	return (
-		<div className={cn("group relative rounded-[inherit]", className)}>
+		<div ref={cardRef} className={cn("group relative rounded-[inherit]", className)}>
 			<motion.div
 				className="pointer-events-none absolute inset-0 rounded-[inherit] bg-border duration-300 group-hover:opacity-100"
 				style={{
 					background: useMotionTemplate`
          radial-gradient(${gradientSize}px circle at ${mouseX}px ${mouseY}px,
-          ${gradientFrom},
-          ${gradientTo},
+          ${gradientFrom}, 
+          ${gradientTo}, 
          var(--border) 100%
          )
          `,
@@ -104,7 +100,7 @@ export function MagicCard({
 					opacity: gradientOpacity,
 				}}
 			/>
-			<div ref={cardRef} className="relative">{children}</div>
+			<div className="relative">{children}</div>
 		</div>
 	)
 }
--- a/web/src/components/recently-added-icons.tsx
+++ b/web/src/components/recently-added-icons.tsx
@@ -30,7 +30,7 @@ export function RecentlyAddedIcons({ icons }: { icons: IconWithName[] }) {
 			{/* Background glow */}
 			<div className="absolute inset-x-0 -top-40 -z-10 transform-gpu overflow-hidden blur-3xl sm:-top-80" aria-hidden="true" />

-			<div className="mx-auto px-4 sm:px-6 lg:px-8">
+			<div className="mx-auto px-6 lg:px-8">
 				<div className="mx-auto max-w-2xl text-center my-4">
 					<h2 className="text-3xl font-bold tracking-tight sm:text-4xl bg-clip-text text-transparent bg-gradient-to-r from-rose-600 to-rose-500  motion-safe:motion-preset-fade-lg motion-duration-500">
 						Recently Added Icons
@@ -61,7 +61,7 @@ export function RecentlyAddedIcons({ icons }: { icons: IconWithName[] }) {
 						href="/icons"
 						className="font-medium inline-flex items-center py-2 px-4 rounded-full border  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>
 				</div>
--- a/web/src/components/structured-data.tsx
+++ b/web/src/components/structured-data.tsx
@@ -1,33 +0,0 @@
-"use client"
-
-type StructuredDataProps = {
-  data: any
-  id?: string
-}
-
-export const StructuredData = ({ data, id }: StructuredDataProps) => {
-  return (
-    <script
-      id={id}
-      type="application/ld+json"
-      dangerouslySetInnerHTML={{ __html: JSON.stringify(data) }}
-    />
-  )
-}
-
-type WebsiteStructuredDataProps = {
-  websiteSchema: any
-  organizationSchema: any
-}
-
-export const WebsiteStructuredData = ({
-  websiteSchema,
-  organizationSchema
-}: WebsiteStructuredDataProps) => {
-  return (
-    <>
-      <StructuredData data={websiteSchema} id="website-schema" />
-      <StructuredData data={organizationSchema} id="organization-schema" />
-    </>
-  )
-}
--- a/web/src/components/ui/command.tsx
+++ b/web/src/components/ui/command.tsx
@@ -0,0 +1,177 @@
+"use client"
+
+import * as React from "react"
+import { Command as CommandPrimitive } from "cmdk"
+import { SearchIcon } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog"
+
+function Command({
+  className,
+  ...props
+}: React.ComponentProps<typeof CommandPrimitive>) {
+  return (
+    <CommandPrimitive
+      data-slot="command"
+      className={cn(
+        "bg-popover text-popover-foreground flex h-full w-full flex-col overflow-hidden rounded-md",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function CommandDialog({
+  title = "Command Palette",
+  description = "Search for a command to run...",
+  children,
+  ...props
+}: React.ComponentProps<typeof Dialog> & {
+  title?: string
+  description?: string
+}) {
+  return (
+    <Dialog {...props}>
+      <DialogHeader className="sr-only">
+        <DialogTitle>{title}</DialogTitle>
+        <DialogDescription>{description}</DialogDescription>
+      </DialogHeader>
+      <DialogContent className="overflow-hidden p-0">
+        <Command className="[&_[cmdk-group-heading]]:text-muted-foreground **:data-[slot=command-input-wrapper]:h-12 [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group]]:px-2 [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5">
+          {children}
+        </Command>
+      </DialogContent>
+    </Dialog>
+  )
+}
+
+function CommandInput({
+  className,
+  ...props
+}: React.ComponentProps<typeof CommandPrimitive.Input>) {
+  return (
+    <div
+      data-slot="command-input-wrapper"
+      className="flex h-9 items-center gap-2 border-b px-3"
+    >
+      <SearchIcon className="size-4 shrink-0 opacity-50" />
+      <CommandPrimitive.Input
+        data-slot="command-input"
+        className={cn(
+          "placeholder:text-muted-foreground flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-hidden disabled:cursor-not-allowed disabled:opacity-50",
+          className
+        )}
+        {...props}
+      />
+    </div>
+  )
+}
+
+function CommandList({
+  className,
+  ...props
+}: React.ComponentProps<typeof CommandPrimitive.List>) {
+  return (
+    <CommandPrimitive.List
+      data-slot="command-list"
+      className={cn(
+        "max-h-[300px] scroll-py-1 overflow-x-hidden overflow-y-auto",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function CommandEmpty({
+  ...props
+}: React.ComponentProps<typeof CommandPrimitive.Empty>) {
+  return (
+    <CommandPrimitive.Empty
+      data-slot="command-empty"
+      className="py-6 text-center text-sm"
+      {...props}
+    />
+  )
+}
+
+function CommandGroup({
+  className,
+  ...props
+}: React.ComponentProps<typeof CommandPrimitive.Group>) {
+  return (
+    <CommandPrimitive.Group
+      data-slot="command-group"
+      className={cn(
+        "text-foreground [&_[cmdk-group-heading]]:text-muted-foreground overflow-hidden p-1 [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function CommandSeparator({
+  className,
+  ...props
+}: React.ComponentProps<typeof CommandPrimitive.Separator>) {
+  return (
+    <CommandPrimitive.Separator
+      data-slot="command-separator"
+      className={cn("bg-border -mx-1 h-px", className)}
+      {...props}
+    />
+  )
+}
+
+function CommandItem({
+  className,
+  ...props
+}: React.ComponentProps<typeof CommandPrimitive.Item>) {
+  return (
+    <CommandPrimitive.Item
+      data-slot="command-item"
+      className={cn(
+        "data-[selected=true]:bg-accent data-[selected=true]:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function CommandShortcut({
+  className,
+  ...props
+}: React.ComponentProps<"span">) {
+  return (
+    <span
+      data-slot="command-shortcut"
+      className={cn(
+        "text-muted-foreground ml-auto text-xs tracking-widest",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export {
+  Command,
+  CommandDialog,
+  CommandInput,
+  CommandList,
+  CommandEmpty,
+  CommandGroup,
+  CommandItem,
+  CommandShortcut,
+  CommandSeparator,
+}
--- a/web/src/constants.ts
+++ b/web/src/constants.ts
@@ -4,119 +4,7 @@ export const METADATA_URL = "https://raw.githubusercontent.com/homarr-labs/dashb
 export const WEB_URL = "https://dashboardicons.com"
 export const REPO_NAME = "homarr-labs/dashboard-icons"

-// Site-wide metadata constants
-export const SITE_NAME = "Dashboard Icons"
-export const TITLE_SEPARATOR = " | "
-export const SITE_TAGLINE = "Your definitive source for dashboard icons"
-export const ORGANIZATION_NAME = "Homarr Labs"
-
 export const getDescription = (totalIcons: number) =>
-	`A curated collection of ${totalIcons} free icons for dashboards and app directories. Available in SVG, PNG, and WEBP formats. ${SITE_TAGLINE}.`
+	`A collection of ${totalIcons} curated icons for services, applications and tools, designed specifically for dashboards and app directories.`

-export const getHomeDescription = (totalIcons: number) =>
-	`Discover our curated collection of ${totalIcons} icons designed specifically for dashboards and app directories. ${SITE_TAGLINE}.`
-
-export const getBrowseDescription = (totalIcons: number) =>
-	`Browse, search and download from our collection of ${totalIcons} curated icons. All icons available in SVG, PNG, and WEBP formats. ${SITE_TAGLINE}.`
-
-export const getIconDescription = (iconName: string, totalIcons: number) =>
-	`Download the ${iconName} icon in SVG, PNG, and WEBP formats. Part of our curated collection of ${totalIcons} free icons for dashboards. ${SITE_TAGLINE}.`
-
-export const websiteTitle = `${SITE_NAME} ${TITLE_SEPARATOR} Free, Curated Icons for Apps & Services`
-export const websiteFullTitle = `${SITE_NAME} ${TITLE_SEPARATOR} Free, Curated Icons for Apps & Services ${TITLE_SEPARATOR} ${SITE_TAGLINE}`
-
-// Various keyword sets for different pages
-export const DEFAULT_KEYWORDS = [
-	"dashboard icons",
-	"app icons",
-	"service icons",
-	"curated icons",
-	"free icons",
-	"SVG icons",
-	"web dashboard",
-	"app directory"
-]
-
-export const BROWSE_KEYWORDS = [
-	"browse icons",
-	"search icons",
-	"download icons",
-	"minimal icons",
-	"dashboard design",
-	"UI icons",
-	...DEFAULT_KEYWORDS
-]
-
-export const ICON_DETAIL_KEYWORDS = (iconName: string) => [
-	`${iconName} icon`,
-	`${iconName} logo`,
-	`${iconName} svg`,
-	`${iconName} download`,
-	`${iconName} dashboard icon`,
-	...DEFAULT_KEYWORDS
-]
-
-// Core structured data for the website (JSON-LD)
-export const getWebsiteSchema = (totalIcons: number) => ({
-	"@context": "https://schema.org",
-	"@type": "WebSite",
-	"name": SITE_NAME,
-	"url": WEB_URL,
-	"description": getDescription(totalIcons),
-	"potentialAction": {
-		"@type": "SearchAction",
-		"target": {
-			"@type": "EntryPoint",
-			"urlTemplate": `${WEB_URL}/icons?q={search_term_string}`
-		},
-		"query-input": "required name=search_term_string"
-	},
-	"slogan": SITE_TAGLINE
-})
-
-// Organization schema
-export const ORGANIZATION_SCHEMA = {
-	"@context": "https://schema.org",
-	"@type": "Organization",
-	"name": ORGANIZATION_NAME,
-	"url": `https://github.com/${REPO_NAME}`,
-	"logo": `${WEB_URL}/og-image.png`,
-	"sameAs": [
-		`https://github.com/${REPO_NAME}`,
-		"https://homarr.dev"
-	],
-	"slogan": SITE_TAGLINE
-}
-
-// Social media
-export const GITHUB_URL = `https://github.com/${REPO_NAME}`
-
-// Image schemas
-export const getIconSchema = (iconName: string, iconId: string, authorName: string, authorUrl: string, updateDate: string, totalIcons: number) => ({
-	"@context": "https://schema.org",
-	"@type": "ImageObject",
-	"name": `${iconName} Icon`,
-	"description": getIconDescription(iconName, totalIcons),
-	"contentUrl": `${BASE_URL}/png/${iconId}.png`,
-	"thumbnailUrl": `${BASE_URL}/png/${iconId}.png`,
-	"uploadDate": updateDate,
-	"author": {
-		"@type": "Person",
-		"name": authorName,
-		"url": authorUrl
-	},
-	"encodingFormat": ["image/png", "image/svg+xml", "image/webp"],
-	"contentSize": "Variable",
-	"representativeOfPage": true,
-	"creditText": `Icon contributed by ${authorName} to the ${SITE_NAME} collection by ${ORGANIZATION_NAME}`,
-	"embedUrl": `${WEB_URL}/icons/${iconId}`
-})
-
-// OpenGraph defaults
-export const DEFAULT_OG_IMAGE = {
-	url: "/og-image.png",
-	width: 1200,
-	height: 630,
-	alt: `${SITE_NAME} - ${SITE_TAGLINE}`,
-	type: "image/png"
-}
+export const websiteTitle = "Free Dashboard Icons - Download High-Quality UI & App Icons"
--- 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
+}
Author	SHA1	Message	Date
Thomas Camlong	f20de48e1a	Merge branch 'main' into feat/pagination	2025-04-24 18:28:47 +02:00
Thomas Camlong	57b0e6a1aa	feat(web): Optimize SEO (#1260 )	2025-04-24 18:22:15 +02:00
Thomas Camlong	038e4dc73d	chore(web): Update Carbon ID	2025-04-24 16:31:45 +02:00
Thomas Camlong	6001d195a6	feat(ci): Specify ID's Signed-off-by: Thomas Camlong <thomas@ajnart.fr> Update add_normal_icon.yml Signed-off-by: Thomas Camlong <thomas@ajnart.fr> Update add_normal_icon.yml Signed-off-by: Thomas Camlong <thomas@ajnart.fr>	2025-04-24 16:31:07 +02:00
Bjorn Lammers	f32b62009b	fix(web): Adjust current page in IconSearch on pagination changes	2025-04-24 16:13:42 +02:00
Bjorn Lammers	e9fe6d3842	fix(web): Run Biome checks and apply fixes	2025-04-24 15:53:08 +02:00
Bjorn Lammers	eb799c3637	feat(web): Add dynamic pagination to IconSearch component	2025-04-24 15:48:19 +02:00
Thomas Camlong	3e2709e7a8	change id	2025-04-23 00:12:09 +02:00
Thomas Camlong	245033befc	Update add_normal_icon.yml Signed-off-by: Thomas Camlong <thomas@ajnart.fr>	2025-04-22 23:24:57 +02:00
Thomas Camlong	9949f663eb	Update add_normal_icon.yml Signed-off-by: Thomas Camlong <thomas@ajnart.fr>	2025-04-22 23:18:46 +02:00
Thomas Camlong	a579d41f45	Update add_normal_icon.yml Signed-off-by: Thomas Camlong <thomas@ajnart.fr>	2025-04-22 23:17:10 +02:00