diff --git a/vault/api/account.go b/vault/api/account.go
index b328dd5..a6f9410 100644
--- a/vault/api/account.go
+++ b/vault/api/account.go
@@ -18,6 +18,11 @@ type accountRequest struct {
 	AccessGroupNames []string `json:"access_group_names"`
 }
 
+type accountListItem struct {
+	service.AccountWithSecretCount
+	CanAccess bool `json:"can_access"`
+}
+
 func ListAccounts(c *gin.Context) {
 	Require(c, RequestTokenExists(c))
 	accounts, err := service.GetAllAccounts()
@@ -29,13 +34,14 @@ func ListAccounts(c *gin.Context) {
 		c.JSON(http.StatusInternalServerError, gin.H{"error": err.Error()})
 		return
 	}
-	authorized := make([]service.AccountWithSecretCount, 0, len(accounts))
+	response := make([]accountListItem, 0, len(accounts))
 	for _, account := range accounts {
-		if RequestTokenCanAccessAccount(c, account.Account) {
-			authorized = append(authorized, account)
-		}
+		response = append(response, accountListItem{
+			AccountWithSecretCount: account,
+			CanAccess:              RequestTokenCanAccessAccount(c, account.Account),
+		})
 	}
-	c.JSON(http.StatusOK, authorized)
+	c.JSON(http.StatusOK, response)
 }
 
 func GetAccount(c *gin.Context) {
diff --git a/vault/api/app_secret.go b/vault/api/app_secret.go
index 0b5ecf8..7200c57 100644
--- a/vault/api/app_secret.go
+++ b/vault/api/app_secret.go
@@ -20,6 +20,11 @@ type appSecretRequest struct {
 	Value string `json:"value"`
 }
 
+type applicationListItem struct {
+	service.ApplicationWithSecretCount
+	CanAccess bool `json:"can_access"`
+}
+
 func ListApplications(c *gin.Context) {
 	Require(c, RequestTokenExists(c))
 	applications, err := service.GetAllApplications()
@@ -27,13 +32,14 @@ func ListApplications(c *gin.Context) {
 		c.JSON(http.StatusInternalServerError, gin.H{"error": err.Error()})
 		return
 	}
-	authorized := make([]service.ApplicationWithSecretCount, 0, len(applications))
+	response := make([]applicationListItem, 0, len(applications))
 	for _, application := range applications {
-		if RequestTokenCanAccessApplication(c, application.Application) {
-			authorized = append(authorized, application)
-		}
+		response = append(response, applicationListItem{
+			ApplicationWithSecretCount: application,
+			CanAccess:                  RequestTokenCanAccessApplication(c, application.Application),
+		})
 	}
-	c.JSON(http.StatusOK, authorized)
+	c.JSON(http.StatusOK, response)
 }
 
 func GetApplication(c *gin.Context) {
diff --git a/web/src/lib/vault.ts b/web/src/lib/vault.ts
index dbe2951..c794304 100644
--- a/web/src/lib/vault.ts
+++ b/web/src/lib/vault.ts
@@ -106,10 +106,12 @@ export type AppSecretApplicationWithSecrets = AppSecretApplication & {
 
 export type AccountListItem = Account & {
   secret_count: number
+  can_access: boolean
 }
 
 export type AppSecretApplicationListItem = AppSecretApplication & {
   secret_count: number
+  can_access: boolean
 }
 
 export type AccountInput = {
diff --git a/web/src/pages/AccountsPage.tsx b/web/src/pages/AccountsPage.tsx
index beedfa9..4fd663f 100644
--- a/web/src/pages/AccountsPage.tsx
+++ b/web/src/pages/AccountsPage.tsx
@@ -1,5 +1,5 @@
 import { useQuery } from "@tanstack/react-query"
-import { ArrowUpRight, Clock3, KeyRound, Plus, Search } from "lucide-react"
+import { ArrowUpRight, Clock3, KeyRound, Lock, Plus, Search } from "lucide-react"
 import { useMemo, useState } from "react"
 import { Link } from "react-router-dom"
 
@@ -10,6 +10,7 @@ import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
 import { Input } from "@/components/ui/input"
 import { Skeleton } from "@/components/ui/skeleton"
 import { listAccounts } from "@/lib/vault"
+import { cn } from "@/lib/utils"
 
 function formatDate(value: string) {
   return new Date(value).toLocaleDateString(undefined, {
@@ -86,14 +87,26 @@ export default function AccountsPage() {
         </Card>
       ) : (
         <div className="grid gap-3 md:grid-cols-2 xl:grid-cols-3">
-          {filteredAccounts.map((account) => (
-            <Link key={account.id} to={`/accounts/${account.id}`} className="group">
-              <Card className="h-full gap-5 transition-all hover:-translate-y-0.5 hover:border-primary/25 hover:shadow-lg hover:shadow-black/5 dark:hover:border-primary/30 dark:hover:shadow-black/25">
+          {filteredAccounts.map((account) => {
+            const card = (
+              <Card
+                className={cn(
+                  "h-full gap-5 transition-all",
+                  account.can_access
+                    ? "hover:-translate-y-0.5 hover:border-primary/25 hover:shadow-lg hover:shadow-black/5 dark:hover:border-primary/30 dark:hover:shadow-black/25"
+                    : "opacity-60",
+                )}
+              >
                 <CardHeader className="gap-3">
                   <CardTitle className="flex items-start justify-between gap-3">
                     <span className="min-w-0 truncate text-base font-semibold">{account.name}</span>
-                    <span className="flex size-7 shrink-0 items-center justify-center rounded-md bg-muted text-muted-foreground transition-colors group-hover:bg-primary group-hover:text-primary-foreground">
-                      <ArrowUpRight className="size-4" />
+                    <span
+                      className={cn(
+                        "flex size-7 shrink-0 items-center justify-center rounded-md bg-muted text-muted-foreground",
+                        account.can_access && "transition-colors group-hover:bg-primary group-hover:text-primary-foreground",
+                      )}
+                    >
+                      {account.can_access ? <ArrowUpRight className="size-4" /> : <Lock className="size-3.5" />}
                     </span>
                   </CardTitle>
                 </CardHeader>
@@ -122,8 +135,18 @@ export default function AccountsPage() {
                   </div>
                 </CardContent>
               </Card>
-            </Link>
-          ))}
+            )
+
+            return account.can_access ? (
+              <Link key={account.id} to={`/accounts/${account.id}`} className="group">
+                {card}
+              </Link>
+            ) : (
+              <div key={account.id} className="cursor-not-allowed" title="You don't have access to this account">
+                {card}
+              </div>
+            )
+          })}
         </div>
       )}
     </PageContainer>
diff --git a/web/src/pages/AppSecretsPage.tsx b/web/src/pages/AppSecretsPage.tsx
index 11d5dc1..fff1abd 100644
--- a/web/src/pages/AppSecretsPage.tsx
+++ b/web/src/pages/AppSecretsPage.tsx
@@ -1,5 +1,5 @@
 import { useQuery } from "@tanstack/react-query"
-import { ArrowUpRight, Clock3, CodeXml, Plus, Search } from "lucide-react"
+import { ArrowUpRight, Clock3, CodeXml, Lock, Plus, Search } from "lucide-react"
 import { useMemo, useState } from "react"
 import { Link } from "react-router-dom"
 
@@ -10,6 +10,7 @@ import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
 import { Input } from "@/components/ui/input"
 import { Skeleton } from "@/components/ui/skeleton"
 import { listAppSecretApplications, type AppSecretApplicationListItem } from "@/lib/vault"
+import { cn } from "@/lib/utils"
 
 function formatDate(value: string) {
   return new Date(value).toLocaleDateString(undefined, {
@@ -91,16 +92,28 @@ export default function AppSecretsPage() {
         </Card>
       ) : (
         <div className="grid gap-3 md:grid-cols-2 xl:grid-cols-3">
-          {filteredApplications.map((application) => (
-            <Link key={application.id} to={`/app-secrets/${application.id}`} className="group">
-              <Card className="h-full gap-5 transition-all hover:-translate-y-0.5 hover:border-primary/25 hover:shadow-lg hover:shadow-black/5 dark:hover:border-primary/30 dark:hover:shadow-black/25">
+          {filteredApplications.map((application) => {
+            const card = (
+              <Card
+                className={cn(
+                  "h-full gap-5 transition-all",
+                  application.can_access
+                    ? "hover:-translate-y-0.5 hover:border-primary/25 hover:shadow-lg hover:shadow-black/5 dark:hover:border-primary/30 dark:hover:shadow-black/25"
+                    : "opacity-60",
+                )}
+              >
                 <CardHeader className="gap-3">
                   <CardTitle className="flex items-start justify-between gap-3">
                     <span className="min-w-0 truncate font-mono text-base font-semibold">
                       {application.name}
                     </span>
-                    <span className="flex size-7 shrink-0 items-center justify-center rounded-md bg-muted text-muted-foreground transition-colors group-hover:bg-primary group-hover:text-primary-foreground">
-                      <ArrowUpRight className="size-4" />
+                    <span
+                      className={cn(
+                        "flex size-7 shrink-0 items-center justify-center rounded-md bg-muted text-muted-foreground",
+                        application.can_access && "transition-colors group-hover:bg-primary group-hover:text-primary-foreground",
+                      )}
+                    >
+                      {application.can_access ? <ArrowUpRight className="size-4" /> : <Lock className="size-3.5" />}
                     </span>
                   </CardTitle>
                 </CardHeader>
@@ -128,8 +141,18 @@ export default function AppSecretsPage() {
                   </div>
                 </CardContent>
               </Card>
-            </Link>
-          ))}
+            )
+
+            return application.can_access ? (
+              <Link key={application.id} to={`/app-secrets/${application.id}`} className="group">
+                {card}
+              </Link>
+            ) : (
+              <div key={application.id} className="cursor-not-allowed" title="You don't have access to this application">
+                {card}
+              </div>
+            )
+          })}
         </div>
       )}
     </PageContainer>