diff --git a/src/pages/Providers.tsx b/src/pages/Providers.tsx
index 5d2477f..e3af419 100644
--- a/src/pages/Providers.tsx
+++ b/src/pages/Providers.tsx
@@ -3,12 +3,15 @@ import { Skeleton } from "@/components/ui/skeleton";
 import { EmptyState } from "@/components/ui/empty-state";
 import { ErrorState } from "@/components/ui/error-state";
 import { PageHeader } from "@/components/PageHeader";
+import { ProviderDrawer } from "@/components/ProviderDrawer";
+import { useProviderDrawerUrlState } from "@/hooks/useProviderDrawerUrlState";
 import { useProviders } from "@/hooks/useProviders";
 import { fmt } from "@/lib/format";
 
 export function Providers() {
   const { data, isLoading, isError, error, refetch } = useProviders();
   const items = data?.items ?? [];
+  const { providerNpi, open, close } = useProviderDrawerUrlState();
 
   return (
     <div className="space-y-6 lg:space-y-8 animate-fade-in">
@@ -44,7 +47,14 @@ export function Providers() {
           {items.map((p) => (
             <article
               key={p.npi}
-              className="group surface-2 rounded-xl p-5 flex flex-col gap-4 transition-colors hover:bg-muted/20 cursor-default"
+              onClick={() => open(p.npi)}
+              onKeyDown={(e) => {
+                if (e.key === "Enter") open(p.npi);
+              }}
+              role="button"
+              tabIndex={0}
+              aria-label={`View provider ${p.name}`}
+              className="group drillable surface-2 rounded-xl p-5 flex flex-col gap-4 transition-colors hover:bg-muted/20 cursor-pointer"
             >
               <div className="flex items-start gap-3">
                 <div className="h-10 w-10 rounded-md bg-muted/60 ring-1 ring-inset ring-border/40 flex items-center justify-center text-foreground">
@@ -91,6 +101,8 @@ export function Providers() {
           ))}
         </div>
       )}
+
+      <ProviderDrawer npi={providerNpi} onClose={close} />
     </div>
   );
 }