diff --git a/messages/en-US.json b/messages/en-US.json
index 23078d05..8a7a98f0 100644
--- a/messages/en-US.json
+++ b/messages/en-US.json
@@ -56,6 +56,9 @@
"sitesBannerTitle": "Connect Any Network",
"sitesBannerDescription": "A site is a connection to a remote network that allows Pangolin to provide access to resources, whether public or private, to users anywhere. Install the site network connector (Newt) anywhere you can run a binary or container to establish the connection.",
"sitesBannerButtonText": "Install Site",
+ "approvalsBannerTitle": "Approve or Deny Device Access",
+ "approvalsBannerDescription": "Review and approve or deny device access requests from users. When device approvals are required, users must get admin approval before their devices can connect to your organization's resources.",
+ "approvalsBannerButtonText": "Learn More",
"siteCreate": "Create Site",
"siteCreateDescription2": "Follow the steps below to create and connect a new site",
"siteCreateDescription": "Create a new site to start connecting resources",
@@ -258,7 +261,7 @@
"accessRolesAdd": "Add Role",
"accessRoleDelete": "Delete Role",
"accessApprovalsManage": "Manage Approvals",
- "accessApprovalsDescription": "Manage approval requests in the organization",
+ "accessApprovalsDescription": "View and manage pending approvals for access to this organization",
"description": "Description",
"inviteTitle": "Open Invitations",
"inviteDescription": "Manage invitations for other users to join the organization",
diff --git a/src/app/[orgId]/settings/(private)/access/approvals/page.tsx b/src/app/[orgId]/settings/(private)/access/approvals/page.tsx
index de62c189..9e89a901 100644
--- a/src/app/[orgId]/settings/(private)/access/approvals/page.tsx
+++ b/src/app/[orgId]/settings/(private)/access/approvals/page.tsx
@@ -1,6 +1,7 @@
import { ApprovalFeed } from "@app/components/ApprovalFeed";
import { PaidFeaturesAlert } from "@app/components/PaidFeaturesAlert";
import SettingsSectionTitle from "@app/components/SettingsSectionTitle";
+import ApprovalsBanner from "@app/components/ApprovalsBanner";
import { internal } from "@app/lib/api";
import { authCookieHeader } from "@app/lib/api/cookies";
import { getCachedOrg } from "@app/lib/api/getCachedOrg";
@@ -44,6 +45,8 @@ export default async function ApprovalFeedPage(props: ApprovalFeedPageProps) {
description={t("accessApprovalsDescription")}
/>
+
+
diff --git a/src/components/ApprovalsBanner.tsx b/src/components/ApprovalsBanner.tsx
new file mode 100644
index 00000000..991a1b10
--- /dev/null
+++ b/src/components/ApprovalsBanner.tsx
@@ -0,0 +1,39 @@
+"use client";
+
+import React from "react";
+import { Button } from "@app/components/ui/button";
+import { ShieldCheck, ArrowRight } from "lucide-react";
+import { useTranslations } from "next-intl";
+import Link from "next/link";
+import DismissableBanner from "./DismissableBanner";
+
+export const ApprovalsBanner = () => {
+ const t = useTranslations();
+
+ return (
+ }
+ description={t("approvalsBannerDescription")}
+ >
+
+
+
+
+ );
+};
+
+export default ApprovalsBanner;