diff --git a/src/components/Layout/SearchLayout.tsx b/src/components/Layout/SearchLayout.tsx
index 7c2d87a0b..a4162b138 100644
--- a/src/components/Layout/SearchLayout.tsx
+++ b/src/components/Layout/SearchLayout.tsx
@@ -6,7 +6,7 @@ import { UserProfileDropdown } from "../../components/Users/UserProfile";
 interface IProps {
   children: React.ReactNode;
   contentClass?: string;
-  title: React.ReactNode;
+  title?: React.ReactNode;
   onRefresh?: () => void;
   loading?: boolean;
   extra?: React.ReactNode;
diff --git a/src/components/Permissions/AuthorizationAccessCheck.tsx b/src/components/Permissions/AuthorizationAccessCheck.tsx
index 109ed575c..c62c87d34 100644
--- a/src/components/Permissions/AuthorizationAccessCheck.tsx
+++ b/src/components/Permissions/AuthorizationAccessCheck.tsx
@@ -1,22 +1,24 @@
 import { ReactElement, useCallback, useEffect, useState } from "react";
-import { FaExclamationCircle } from "react-icons/fa";
 import {
   ActionType,
   useUserAccessStateContext
 } from "../../context/UserAccessContext/UserAccessContext";
+import UnAuthorizedPage, { UnAuthorizedMessage } from "./UnAuhorizedPage";
 
 type AuthorizationAccessCheckProps = {
   resource: string | string[];
   action: ActionType;
   children: ReactElement;
   showUnauthorizedMessage?: boolean;
+  hideNavbar?: boolean;
 };
 
 export function AuthorizationAccessCheck({
   resource,
   action,
   showUnauthorizedMessage = false,
-  children
+  children,
+  hideNavbar = false
 }: AuthorizationAccessCheckProps) {
   const { hasAnyResourceAccess, roles, isLoading } =
     useUserAccessStateContext();
@@ -42,15 +44,11 @@ export function AuthorizationAccessCheck({
     return null;
   }
 
-  return (
-    <div className="flex h-full w-full flex-col items-center justify-center gap-2">
-      <h1 className="font-semibold text-red-500">
-        <FaExclamationCircle className="mr-2 inline-block" />
-        Unauthorized
-      </h1>
-      <p>You do not have permission to access this page</p>
-    </div>
-  );
+  if (hideNavbar) {
+    return <UnAuthorizedMessage />;
+  }
+
+  return <UnAuthorizedPage isLoading={isLoading} />;
 }
 
 export const withAuthorizationAccessCheck = (
diff --git a/src/components/Permissions/UnAuhorizedPage.tsx b/src/components/Permissions/UnAuhorizedPage.tsx
new file mode 100644
index 000000000..e618f47b2
--- /dev/null
+++ b/src/components/Permissions/UnAuhorizedPage.tsx
@@ -0,0 +1,26 @@
+import { FaExclamationCircle } from "react-icons/fa";
+import { SearchLayout } from "../Layout/SearchLayout";
+
+export function UnAuthorizedMessage() {
+  return (
+    <div className="flex h-full w-full flex-col items-center justify-center gap-2">
+      <h1 className="font-semibold text-red-500">
+        <FaExclamationCircle className="mr-2 inline-block" />
+        Unauthorized
+      </h1>
+      <p>You do not have permission to access this page</p>
+    </div>
+  );
+}
+
+export default function UnAuthorizedPage({
+  isLoading
+}: {
+  isLoading: boolean;
+}) {
+  return (
+    <SearchLayout contentClass="p-0 h-full" loading={isLoading}>
+      <UnAuthorizedMessage />
+    </SearchLayout>
+  );
+}