diff --git a/apps/web/app/components/PluginCard.vue b/apps/web/app/components/PluginCard.vue
index f3b840f5..84e3ec2f 100644
--- a/apps/web/app/components/PluginCard.vue
+++ b/apps/web/app/components/PluginCard.vue
@@ -40,46 +40,17 @@
             </UBadge>
           </div>
         </div>
-        <div v-if="hasContext || hasMcpServer || authorName" class="flex items-center gap-2">
+        <div v-if="badges.length > 0" class="flex items-center gap-2">
           <UBadge
-            v-if="authorName === 'Google'"
+            v-for="badge in badges"
+            :key="badge.key"
             variant="soft"
-            color="warning"
+            :color="badge.color"
             size="sm"
-            title="Developed by Google"
+            :title="badge.title"
           >
-            <UIcon name="i-simple-icons-google" class="mr-1" />
-            Google
-          </UBadge>
-          <UBadge
-            v-if="authorName === 'Anthropic'"
-            variant="soft"
-            color="error"
-            size="sm"
-            title="Developed by Anthropic"
-          >
-            <UIcon name="i-simple-icons-anthropic" class="mr-1" />
-            Anthropic
-          </UBadge>
-          <UBadge
-            v-if="hasContext"
-            variant="soft"
-            color="info"
-            size="sm"
-            title="Includes Context File"
-          >
-            <UIcon name="i-heroicons-document-text" class="mr-1" />
-            Context
-          </UBadge>
-          <UBadge
-            v-if="hasMcpServer"
-            variant="soft"
-            color="primary"
-            size="sm"
-            title="Includes MCP Server"
-          >
-            <UIcon name="i-heroicons-server" class="mr-1" />
-            MCP
+            <UIcon :name="badge.icon" class="mr-1" />
+            {{ badge.label }}
           </UBadge>
         </div>
       </div>
@@ -140,6 +111,8 @@
 </template>
 
 <script setup lang="ts">
+import { useTimeoutFn } from '@vueuse/core'
+
 interface PluginSource {
   source: 'github'
   repo: string
@@ -163,9 +136,12 @@ interface PluginMetadata {
   [key: string]: any
 }
 
-const props = defineProps<{
+const props = withDefaults(defineProps<{
   plugin: Plugin
-}>()
+  autoOpenModal?: boolean
+}>(), {
+  autoOpenModal: false
+})
 
 const isModalOpen = ref(false)
 const pluginMetadata = ref<PluginMetadata | null>(null)
@@ -183,11 +159,42 @@ const fetchPluginMetadata = async () => {
     const url = `https://raw.githubusercontent.com/${props.plugin.source.repo}/main/.claude-plugin/plugin.json`
     const response = await fetch(url)
 
-    if (response.ok) {
+    if (!response.ok) {
+      // Log specific HTTP error
+      console.error(`Failed to fetch plugin metadata: HTTP ${response.status}`, {
+        plugin: props.plugin.name,
+        repo: props.plugin.source.repo,
+        status: response.status,
+        statusText: response.statusText
+      })
+
+      // Handle specific error cases
+      if (response.status === 404) {
+        console.warn(`Plugin metadata not found for ${props.plugin.name}`)
+        // 404 is common for plugins without metadata - don't show toast
+      } else if (response.status === 403) {
+        console.error(`Access denied to plugin metadata for ${props.plugin.name}`)
+      }
+      return
+    }
+
+    // Parse JSON with error handling
+    try {
       pluginMetadata.value = await response.json()
+    } catch (parseErr) {
+      console.error('Failed to parse plugin metadata JSON:', {
+        plugin: props.plugin.name,
+        error: parseErr instanceof Error ? parseErr.message : String(parseErr)
+      })
+      // Don't show toast - this is a plugin configuration issue
     }
   } catch (err) {
-    console.error('Failed to fetch plugin metadata:', err)
+    // Network-level errors (connection failed, CORS, etc.)
+    console.error('Network error fetching plugin metadata:', {
+      plugin: props.plugin.name,
+      repo: props.plugin.source.repo,
+      error: err instanceof Error ? err.message : String(err)
+    })
   } finally {
     loading.value = false
   }
@@ -203,17 +210,16 @@ const displayDescription = computed(() => {
   return props.plugin.description || pluginMetadata.value?.description || 'No description available'
 })
 
-// Computed author - prefer marketplace.json, fallback to metadata
-const displayAuthor = computed(() => {
-  const author = props.plugin.author || pluginMetadata.value?.author
-  // Handle both string and object formats
+// Extract author name from either marketplace.json or fetched metadata
+// Handles both string and object formats
+function getAuthorName(author: string | { name?: string } | undefined): string | undefined {
   return typeof author === 'string' ? author : author?.name
-})
+}
 
-// Get author name for badge display
-const authorName = computed(() => {
+// Computed author - prefer marketplace.json, fallback to metadata
+const displayAuthor = computed(() => {
   const author = props.plugin.author || pluginMetadata.value?.author
-  return typeof author === 'string' ? author : author?.name
+  return getAuthorName(author)
 })
 
 // Computed license - from fetched metadata
@@ -231,6 +237,61 @@ const hasContext = computed(() => {
   return !!pluginMetadata.value?.contextFileName
 })
 
+// Consolidated badges configuration
+interface Badge {
+  key: string
+  icon: string
+  label: string
+  color: 'primary' | 'secondary' | 'success' | 'info' | 'warning' | 'error' | 'neutral'
+  title: string
+}
+
+const badges = computed<Badge[]>(() => {
+  const badgeList: Badge[] = []
+
+  // Author badges
+  if (displayAuthor.value === 'Google') {
+    badgeList.push({
+      key: 'google',
+      icon: 'i-simple-icons-google',
+      label: 'Google',
+      color: 'warning',
+      title: 'Developed by Google'
+    })
+  } else if (displayAuthor.value === 'Anthropic') {
+    badgeList.push({
+      key: 'anthropic',
+      icon: 'i-simple-icons-anthropic',
+      label: 'Anthropic',
+      color: 'error',
+      title: 'Developed by Anthropic'
+    })
+  }
+
+  // Feature badges
+  if (hasContext.value) {
+    badgeList.push({
+      key: 'context',
+      icon: 'i-heroicons-document-text',
+      label: 'Context',
+      color: 'info',
+      title: 'Includes Context File'
+    })
+  }
+
+  if (hasMcpServer.value) {
+    badgeList.push({
+      key: 'mcp',
+      icon: 'i-heroicons-server',
+      label: 'MCP',
+      color: 'primary',
+      title: 'Includes MCP Server'
+    })
+  }
+
+  return badgeList
+})
+
 // Fetch metadata on mount
 onMounted(() => {
   fetchPluginMetadata()
@@ -239,4 +300,21 @@ onMounted(() => {
 const openInstallModal = () => {
   isModalOpen.value = true
 }
+
+// Auto-open modal when autoOpenModal prop is true with automatic cleanup
+const { start: startModalTimer, stop: stopModalTimer } = useTimeoutFn(() => {
+  isModalOpen.value = true
+}, 500)
+
+watch(() => props.autoOpenModal, (shouldOpen) => {
+  // Stop any existing timer
+  stopModalTimer()
+
+  if (shouldOpen) {
+    // Start timer to open modal after scroll completes
+    startModalTimer()
+  }
+}, { immediate: true })
+
+// VueUse automatically cleans up on unmount, no need for manual cleanup!
 </script>
diff --git a/apps/web/app/pages/index.vue b/apps/web/app/pages/index.vue
index df8f5111..cc59919c 100644
--- a/apps/web/app/pages/index.vue
+++ b/apps/web/app/pages/index.vue
@@ -55,7 +55,9 @@
         <PluginCard
           v-for="plugin in filteredPlugins"
           :key="plugin.name"
+          :ref="el => setPluginCardRef(plugin.name, el)"
           :plugin="plugin"
+          :auto-open-modal="plugin.name === targetPluginName"
         />
       </UPageGrid>
 
@@ -95,6 +97,8 @@
 </template>
 
 <script setup lang="ts">
+import { useTimeoutFn } from '@vueuse/core'
+
 interface PluginSource {
   source: 'github'
   repo: string
@@ -120,6 +124,36 @@ interface MarketplaceData {
 }
 
 const searchQuery = ref('')
+const route = useRoute()
+const router = useRouter()
+const toast = useToast()
+const pluginCardRefs = ref<Record<string, any>>({})
+const pendingScrollTimer = ref<{ stop: () => void } | null>(null)
+
+// Get target plugin name from URL query parameter with validation
+const targetPluginName = computed(() => {
+  const pluginParam = route.query.plugin || route.query.install
+
+  // Handle array case (e.g., ?plugin=foo&plugin=bar)
+  if (Array.isArray(pluginParam)) {
+    console.warn('[Plugin URL Navigation] Multiple plugin parameters detected, using first value')
+    return pluginParam[0] || undefined
+  }
+
+  // Handle empty string
+  if (pluginParam === '') {
+    console.warn('[Plugin URL Navigation] Empty plugin parameter detected')
+    return undefined
+  }
+
+  // Normalize and validate
+  if (typeof pluginParam === 'string') {
+    const normalized = pluginParam.trim()
+    return normalized || undefined
+  }
+
+  return undefined
+})
 
 // Fetch marketplace data
 const { data: marketplaceData, pending, error } = await useAsyncData<MarketplaceData>(
@@ -127,6 +161,19 @@ const { data: marketplaceData, pending, error } = await useAsyncData<Marketplace
   () => queryCollection('marketplace').first()
 )
 
+// Check if plugin matches search query
+function pluginMatchesSearch(plugin: Plugin, query: string): boolean {
+  const searchFields = [
+    plugin.name,
+    plugin.description,
+    plugin.source.repo
+  ]
+
+  return searchFields.some(field =>
+    field.toLowerCase().includes(query)
+  )
+}
+
 // Filter plugins based on search query
 const filteredPlugins = computed(() => {
   if (!marketplaceData.value?.plugins) return []
@@ -137,13 +184,117 @@ const filteredPlugins = computed(() => {
     return marketplaceData.value.plugins
   }
 
-  return marketplaceData.value.plugins.filter(plugin => {
-    return (
-      plugin.name.toLowerCase().includes(query) ||
-      plugin.description.toLowerCase().includes(query) ||
-      plugin.source.repo.toLowerCase().includes(query)
-    )
-  })
+  return marketplaceData.value.plugins.filter(plugin =>
+    pluginMatchesSearch(plugin, query)
+  )
+})
+
+// Store plugin card refs for scrolling
+const setPluginCardRef = (pluginName: string, el: any) => {
+  if (el) {
+    pluginCardRefs.value[pluginName] = el
+  }
+}
+
+// Scroll to a specific plugin card with error handling
+function scrollToPlugin(pluginName: string): boolean {
+  const targetCard = pluginCardRefs.value[pluginName]
+
+  if (!targetCard) {
+    // Use debug level for initial attempts - this is expected during loading
+    return false
+  }
+
+  try {
+    const element = targetCard.$el
+
+    if (!element || !(element instanceof HTMLElement)) {
+      throw new Error(`Invalid DOM element for plugin "${pluginName}"`)
+    }
+
+    if (typeof element.scrollIntoView !== 'function') {
+      throw new Error('scrollIntoView not supported')
+    }
+
+    element.scrollIntoView({
+      behavior: 'smooth',
+      block: 'center'
+    })
+
+    return true
+  } catch (error) {
+    console.error(`[Plugin URL Navigation] Failed to scroll to plugin "${pluginName}":`, error)
+    return false
+  }
+}
+
+// Auto-scroll to target plugin when page loads with user feedback
+watch([() => targetPluginName.value, pending], ([pluginName, isLoading]) => {
+  if (!pluginName || isLoading) return
+
+  // Check if plugin exists in the data first
+  const pluginExists = marketplaceData.value?.plugins?.some(p => p.name === pluginName)
+
+  if (!pluginExists) {
+    // Plugin doesn't exist in marketplace data
+    toast.add({
+      title: 'Plugin Not Found',
+      description: `The plugin "${pluginName}" could not be found. It may have been removed or the link may be incorrect.`,
+      color: 'red',
+      icon: 'i-heroicons-exclamation-triangle'
+    })
+
+    // Clear the query parameter to prevent confusion
+    router.replace({ query: {} })
+    return
+  }
+
+  // Clean up any existing pending timer
+  pendingScrollTimer.value?.stop()
+
+  // Plugin exists, try to scroll with retry logic
+  let retryCount = 0
+  const maxRetries = 5
+  const retryDelay = 200 // ms between retries
+
+  const attemptScroll = () => {
+    // Wait for next tick to ensure DOM is updated
+    nextTick(() => {
+      const scrolled = scrollToPlugin(pluginName)
+
+      if (scrolled) {
+        // Success! Clear timer reference
+        pendingScrollTimer.value = null
+        return
+      }
+
+      // Not ready yet, retry if we haven't exceeded max retries
+      retryCount++
+      if (retryCount < maxRetries) {
+        const timer = useTimeoutFn(attemptScroll, retryDelay)
+        pendingScrollTimer.value = timer
+        timer.start()
+      } else {
+        // Max retries reached, show user feedback
+        console.error(`[Plugin URL Navigation] Failed to scroll to "${pluginName}" after ${maxRetries} attempts`)
+        toast.add({
+          title: 'Navigation Issue',
+          description: `The plugin "${pluginName}" was found but could not be displayed. Try refreshing the page.`,
+          color: 'orange',
+          icon: 'i-heroicons-exclamation-circle'
+        })
+        pendingScrollTimer.value = null
+      }
+    })
+  }
+
+  // Start the scroll attempt cycle
+  attemptScroll()
+}, { immediate: true })
+
+// Clean up pending timer on unmount
+onBeforeUnmount(() => {
+  pendingScrollTimer.value?.stop()
 })
 
 // SEO Meta