diff --git a/apps/web/components/navbar.tsx b/apps/web/components/navbar.tsx
index eb0fb75..78d9cd9 100644
--- a/apps/web/components/navbar.tsx
+++ b/apps/web/components/navbar.tsx
@@ -151,7 +151,7 @@ export default function Navbar() {
                     initial={{ opacity: 0, y: "-100%" }}
                     animate={{ opacity: 1, y: 0 }}
                     exit={{ opacity: 0, y: "-100%" }}
-                    className='w-full flex flex-row px-4 md:px-[10svw] py-2 items-center gap-4 md:gap-8 justify-between border-b border-border sticky top-0 z-50 backdrop-blur-sm bg-background/80'
+                    className='w-full flex flex-row px-4 lg:px-[10svw] py-2 items-center gap-4 lg:gap-8 justify-between border-b border-border sticky top-0 z-50 backdrop-blur-sm bg-background/80'
                 >
                     <Link
                         href='/'
@@ -164,7 +164,7 @@ export default function Navbar() {
                             loading='eager'
                         />
                         {!isLanding && (
-                            <motion.span className='hidden md:inline-block'>
+                            <motion.span className='hidden lg:inline-block'>
                                 DeckyVault
                             </motion.span>
                         )}
@@ -233,7 +233,7 @@ export default function Navbar() {
                     </AnimatePresence>
 
                     {/* Desktop Navigation Links */}
-                    <ul className='hidden md:flex flex-row items-center gap-6 shrink-0'>
+                    <ul className='hidden lg:flex flex-row items-center gap-6 shrink-0'>
                         {navbarRoutes.map((route) => (
                             <Link
                                 key={route.href}
@@ -352,7 +352,7 @@ export default function Navbar() {
                     {/* Mobile Hamburger Button */}
                     <button
                         onClick={() => setMobileMenuOpen(true)}
-                        className='flex md:hidden flex-row items-center justify-center p-2 -mr-2 rounded-md hover:bg-text/5 transition-colors cursor-pointer'
+                        className='flex lg:hidden flex-row items-center justify-center p-2 -mr-2 rounded-md hover:bg-text/5 transition-colors cursor-pointer'
                         aria-label='Open menu'
                     >
                         <MenuIcon className='h-5 w-5' />
@@ -369,7 +369,7 @@ export default function Navbar() {
                             animate={{ opacity: 1 }}
                             exit={{ opacity: 0 }}
                             transition={{ duration: 0.2 }}
-                            className='fixed inset-0 bg-black/50 z-60 md:hidden'
+                            className='fixed inset-0 bg-black/50 z-60 lg:hidden'
                             onClick={() => setMobileMenuOpen(false)}
                         />
                         <motion.aside
@@ -381,7 +381,7 @@ export default function Navbar() {
                                 damping: 25,
                                 stiffness: 250,
                             }}
-                            className='fixed top-0 right-0 bottom-0 w-64 bg-background border-l border-border z-70 md:hidden flex flex-col'
+                            className='fixed top-0 right-0 bottom-0 w-64 bg-background border-l border-border z-70 lg:hidden flex flex-col'
                         >
                             <div className='flex flex-row items-center justify-between px-4 py-2 border-b border-border'>
                                 <span className='font-bold text-lg'>Menu</span>
diff --git a/plugins/decky-vault/src/components/LibraryAppPanel.tsx b/plugins/decky-vault/src/components/LibraryAppPanel.tsx
index 601a3a4..8899671 100644
--- a/plugins/decky-vault/src/components/LibraryAppPanel.tsx
+++ b/plugins/decky-vault/src/components/LibraryAppPanel.tsx
@@ -1,18 +1,17 @@
 import { useEffect, useState, useRef } from "react"
-import { PanelSectionRow, DropdownItem, ButtonItem, staticClasses } from "@decky/ui"
+import { PanelSectionRow, DialogButtonPrimary, staticClasses } from "@decky/ui"
 import { Router } from "@decky/ui"
 import {
   fetchPluginGame,
-  fetchPluginDevices,
   setPluginApiBaseUrl,
   type PluginGameResponse,
-  type PluginDeviceRow,
 } from "../lib/plugin-api"
+import { getHardwareInfo } from "../lib/api"
 
 interface Props {
   appId: number
   title: string
-  hardwareSlug: string | null      // detected device
+  hardwareSlug: string | null      // detected device (from settings, may be null)
   baseUrl: string
 }
 
@@ -34,10 +33,9 @@ function openExternalUrl(url: string) {
 
 export default function LibraryAppPanel({ appId, title, hardwareSlug, baseUrl }: Props) {
   const [data, setData] = useState<PluginGameResponse | null>(null)
-  const [devices, setDevices] = useState<PluginDeviceRow[]>([])
   const [loading, setLoading] = useState(true)
-  const [device, setDevice] = useState<string>(hardwareSlug ?? "")  // "" = all devices
   const [fetchError, setFetchError] = useState<string>("")
+  const [detectedSlug, setDetectedSlug] = useState<string | null>(hardwareSlug ?? null)
   const reqIdRef = useRef(0)
 
   useEffect(() => {
@@ -47,13 +45,23 @@ export default function LibraryAppPanel({ appId, title, hardwareSlug, baseUrl }:
     async function load() {
       setLoading(true)
       try {
-        const d = await fetchPluginGame(appId, device || null, 3)
+        // Detect hardware if not set in settings
+        let slug = hardwareSlug ?? null
+        if (!slug) {
+          try {
+            const hw = await getHardwareInfo()
+            if (hw.slug && hw.slug !== "unknown") slug = hw.slug
+          } catch {
+            // Fall back to global
+          }
+          if (!cancelled) setDetectedSlug(slug)
+        }
+
+        const d = await fetchPluginGame(appId, slug, 3)
         if (cancelled || id !== reqIdRef.current) return
         setFetchError(d.error && !d.game ? d.error : "")
         setData(d)
         setLoading(false)
-        const devs = await fetchPluginDevices(appId)
-        if (!cancelled && id === reqIdRef.current) setDevices(devs)
       } catch {
         if (!cancelled && id === reqIdRef.current) {
           setData(null)
@@ -64,15 +72,7 @@ export default function LibraryAppPanel({ appId, title, hardwareSlug, baseUrl }:
     }
     load()
     return () => { cancelled = true }
-  }, [appId, device, baseUrl])
-
-  const deviceOptions = [
-    { label: "All devices", data: "" },
-    ...(hardwareSlug ? [{ label: `Your device (${hardwareSlug})`, data: hardwareSlug }] : []),
-    ...devices
-      .filter((d) => d.slug !== hardwareSlug)
-      .map((d) => ({ label: `${d.name} (${d.count})`, data: d.slug })),
-  ]
+  }, [appId, baseUrl])  // re-fetch only when app changes
 
   const gameUrl = data?.game?.steamAppId
     ? `${baseUrl}/game/${data.game.steamAppId}`
@@ -81,7 +81,7 @@ export default function LibraryAppPanel({ appId, title, hardwareSlug, baseUrl }:
   if (loading) {
     return (
       <PanelSectionRow>
-        <div className={staticClasses.Text} style={{ padding: "8px 0", fontSize: "12px", opacity: 0.5, textAlign: "center" }}>
+        <div className={staticClasses.Text} style={{ padding: "8px 16px", fontSize: "12px", opacity: 0.5, textAlign: "center" }}>
           DeckyVault loading…
         </div>
       </PanelSectionRow>
@@ -91,7 +91,7 @@ export default function LibraryAppPanel({ appId, title, hardwareSlug, baseUrl }:
   if (fetchError) {
     return (
       <PanelSectionRow>
-        <div className={staticClasses.Text} style={{ fontSize: "12px", padding: "8px 0", opacity: 0.5, color: "#e74c3c", textAlign: "center" }}>
+        <div className={staticClasses.Text} style={{ fontSize: "12px", padding: "8px 16px", opacity: 0.5, color: "#e74c3c", textAlign: "center" }}>
           DeckyVault: {fetchError}
         </div>
       </PanelSectionRow>
@@ -101,7 +101,7 @@ export default function LibraryAppPanel({ appId, title, hardwareSlug, baseUrl }:
   if (!data || !data.game) {
     return (
       <PanelSectionRow>
-        <div className={staticClasses.Text} style={{ fontSize: "12px", padding: "8px 0", opacity: 0.5, textAlign: "center" }}>
+        <div className={staticClasses.Text} style={{ fontSize: "12px", padding: "8px 16px", opacity: 0.5, textAlign: "center" }}>
           Not on DeckyVault — <a href={`${baseUrl}/games`}>add it</a>
         </div>
       </PanelSectionRow>
@@ -110,37 +110,34 @@ export default function LibraryAppPanel({ appId, title, hardwareSlug, baseUrl }:
 
   return (
     <>
-      {/* Stats + device dropdown inline */}
-      <PanelSectionRow>
-        <div className={staticClasses.Text} style={{ display: "flex", alignItems: "center", justifyContent: "space-between", gap: "8px", padding: "2px 0", fontSize: "13px" }}>
-          <span style={{ flex: 1, textAlign: "center" }}>
-            {data.estFps ? (
-              <span style={{ display: "inline-flex", flexWrap: "wrap", gap: "4px 8px", justifyContent: "center" }}>
-                <span><strong>{data.estFps.avg}</strong> <span style={{ opacity: 0.4 }}>avg</span></span>
-                {data.estFps.onePct != null && <span><strong>{data.estFps.onePct}</strong> <span style={{ opacity: 0.4 }}>1% low</span></span>}
-                {data.estFps.low != null && <span><strong>{data.estFps.low}</strong> <span style={{ opacity: 0.4 }}>min</span></span>}
-                {data.estFps.high != null && <span><strong>{data.estFps.high}</strong> <span style={{ opacity: 0.4 }}>max</span></span>}
-                {data.estFps.tdpAvg != null && <span><strong>{data.estFps.tdpAvg}W</strong> <span style={{ opacity: 0.4 }}>TDP</span></span>}
-                <span style={{ opacity: 0.4 }}>({data.estFps.count})</span>
-              </span>
-            ) : (
-              <span style={{ opacity: 0.4, fontSize: "12px" }}>No data yet</span>
-            )}
+      <style>{`
+        .deckyvault-lib-btn { width: auto !important; min-width: 0 !important; display: inline-block !important; }
+      `}</style>
+      <div className={staticClasses.Text} style={{ display: "flex", alignItems: "center", justifyContent: "space-between", gap: "8px", padding: "4px 16px", fontSize: "13px", overflow: "hidden" }}>
+        {/* Stats */}
+        <span style={{ flex: "1 1 0", minWidth: 0, overflow: "hidden" }}>
+          {data.estFps ? (
+            <span style={{ display: "inline-flex", flexWrap: "wrap", gap: "4px 8px" }}>
+              <span><strong>{data.estFps.avg}</strong> <span style={{ opacity: 0.4 }}>avg</span></span>
+              {data.estFps.onePct != null && <span><strong>{data.estFps.onePct}</strong> <span style={{ opacity: 0.4 }}>1% low</span></span>}
+              {data.estFps.low != null && <span><strong>{data.estFps.low}</strong> <span style={{ opacity: 0.4 }}>min</span></span>}
+              {data.estFps.high != null && <span><strong>{data.estFps.high}</strong> <span style={{ opacity: 0.4 }}>max</span></span>}
+              {data.estFps.tdpAvg != null && <span><strong>{data.estFps.tdpAvg}W</strong> <span style={{ opacity: 0.4 }}>TDP</span></span>}
+              <span style={{ opacity: 0.4 }}>({data.estFps.count})</span>
+            </span>
+          ) : (
+            <span style={{ opacity: 0.4, fontSize: "12px" }}>No data yet</span>
+          )}
+          {/* Device scope badge */}
+          <span style={{ fontSize: "10px", opacity: 0.4, marginLeft: "4px" }}>
+            {detectedSlug ? detectedSlug : <span style={{ color: "#e0a030" }}>⚠ global</span>}
           </span>
-          <DropdownItem
-            rgOptions={deviceOptions}
-            selectedOption={device}
-            onChange={(opt) => setDevice(opt.data as string)}
-          />
-        </div>
-      </PanelSectionRow>
-
-      {/* View Details button */}
-      <PanelSectionRow>
-        <ButtonItem layout="below" onClick={() => openExternalUrl(gameUrl)}>
+        </span>
+        {/* View Details — gamepad-navigable, CSS-constrained width */}
+        <DialogButtonPrimary className="deckyvault-lib-btn" onClick={() => openExternalUrl(gameUrl)}>
           View Details
-        </ButtonItem>
-      </PanelSectionRow>
+        </DialogButtonPrimary>
+      </div>
     </>
   )
 }
\ No newline at end of file